8***@qq.com
8***@qq.com
  • 发布:2019-11-08 15:36
  • 更新:2019-11-13 20:25
  • 阅读:1421

【报Bug】H5页面刷新后windowWidth大了2.6倍,造成页面布局比例错误,但Tabbar正常,包括本地运行的官方Demo,开发或打包都是这样

分类:uni-app

详细问题描述

H5页面首次进入正常,刷新后windowWidth大了2.6倍,造成页面布局比例错误,但Tabbar正常,包括本地运行的官方Demo,开发或打包都是这样,附上截图

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]

重现步骤

[步骤]

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-11-08 15:36 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者)

找到解决方式了:

操作系统:IOS 10以下

浏览器:safafi,微信内置浏览器,其他

异常现象说明:同事在写Web移动端页面时,设置了viewport width=device-width, 用javascript获取window.innerWidth的值,出现两种异常情况。

1.【IOS 9.1】在第一次进入页面时值为正常的视窗宽度(320宽度),刷新当前页面时window.innerWidth的值变为980。

2.【IOS 8】在第一次进入页面时值为980,刷新当前页面后才是正常的视窗宽度(320宽度)。

解决方法:

1.window.onload 后再取window.innerWidth

2.meta viewport的content中加 shrink-to-fit=no 

3.用document.documentElement.clientWidth 或 document.body.clientWidth(IE9以下)替换 window.innerWidth

程咬金3斧头

程咬金3斧头

这本来就不是bug。你用的upx或者rpx单位,当然会跟着屏幕尺寸来计算了。官方文档说的很明白了,字体或者高度不应该用这种动态单位。

该问题目前已经被锁定, 无法添加新回复