6***@qq.com
6***@qq.com
  • 发布:2020-05-08 14:55
  • 更新:2020-05-14 14:16
  • 阅读:1107

【报Bug】H5模式,在IOS 横屏时,rpx的计算还是按照竖屏的来( 经过测试,是getSystemInfoSync问题)

分类:uni-app

详细问题描述

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

[内容]

重现步骤

H5模式,在IOS 横屏时,rpx的计算还是按照竖屏的来
IOS的

安卓的

[步骤]

[结果]

[期望]

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

IDE运行环境说明

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

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

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

[运行端版本号]

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

[编译模式说明:自定义组件模式?纯nvue模式?v3模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

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

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

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2020-05-08 14:55 负责人:DCloud_UNI_GSQ 分享
已邀请:
6***@qq.com

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

请问有没有临时的解决方案,急,谢谢

6***@qq.com

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

经过排查,发现是 uni.getSystemInfoSync() 获取的 windowWidth 始终为375
第一次解决方案:
修改打包后的js : chunk-vendors.[随机数字].js
格式化代码后: 在204行的 c() 方法中 重写为

        function c() {  
				var t = uni.getSystemInfoSync(),  
					e = t.platform,  
					n = t.pixelRatio,  
					r = t.windowWidth;  
                               if (document && /iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase()) && (window.orientation==90||window.orientation==-90)){  
				r = document.body.clientWidth  
			}	  
				o = r, s = n, a = "ios" === e  
			}

第二种最终解决方案:
在App.vue 的最上方重写 uni.getSystemInfoSync() ,【ps: 为什么不在main.js重写,是因为App.vue的引入时机更早,而且在转换之前】

let originSystemInfo = uni.getSystemInfo;  
	uni.getSystemInfoSync = () => {  
		let info = originSystemInfo()  
		let windowWidth = info.windowWidth  
		let windowHeight = info.windowHeight  
		// #ifdef H5  
			if (/iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase()) && (window.orientation==90||window.orientation==-90)){  
				windowWidth = document.body.clientWidth  
				windowHeight = document.body.clientHeight  
				console.log('计算了宽度',windowWidth)  
			}	  
		// #endif  
		return {...info, windowWidth,windowHeight  }   
	}

问题解决

6***@qq.com

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

更正下上方的第二种解决方案, 在安卓的h5会有问题

	// #ifdef H5  
	if(/iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase()) ) {  
		let originSystemInfo = uni.getSystemInfo;  
		uni.getSystemInfoSync = () => {  
			let info = originSystemInfo()  
			let windowWidth = info.windowWidth  
			let windowHeight = info.windowHeight  
			  
				if (window.orientation==90||window.orientation==-90){  
					windowWidth = document.body.clientWidth  
					windowHeight = document.body.clientHeight  
					return {...info, windowWidth,windowHeight  }   
				}	  
  
			return info  
		}  
	}  
	// #endif
  • 测试阿斯蒂芬

    大神,同样的问题 ,要不是你的方案我就要被我们老板砍死了.


    2020-05-11 15:09

  • 6***@qq.com (作者)

    回复 测试阿斯蒂芬: 龙神大佬,在你的指导下完成这次的bug解决,你这样说,让我很惭愧= - = 、


    2020-05-11 15:11

DCloud_UNI_GSQ

DCloud_UNI_GSQ

bug 确认,已加分,后续修复。

DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX 2.7.2 alpha 已修复

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