H5嵌入webview时遇到的兼容性的坑

楼主在写一个H5项目的时候,按照平时动态设置font-size的原理进行移动端适配。如下:

(function() {
	const ua = navigator.userAgent;
	const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
	const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
	var dpr = window.devicePixelRatio || 1;
	if (!isIos && !(matches && matches[1] > 534)) {
		dpr = 1;
	}
	const scale = 1 / dpr;
	var metaEl = document.querySelector('meta[name="viewport"]');
	if (!metaEl) {
		metaEl = document.createElement('meta');
		metaEl.setAttribute('name', 'viewport');
		window.document.head.appendChild(metaEl);
	}

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

})();

本来测试没啥问题,我用浏览器也确认没啥问题。测试却突然告诉我,有时页面打开啥都没看到??

纳尼?我第一反应以为是网络速度太慢导致的问题,于是我使用了开发者工具中network的slow3G模式:

slow3G

然而就算我模拟了差的网络条件,也不至于加载不出来,只是慢了点。

于是我感觉是嵌入到webview所引发的坑。

所以下一步我用了Chrome的inspector工具进行调查,在app中不停地打开我写的h5页面,等待问题页面的出现。

好!出现了,我打开Chrome的调试工具,发现:

问题

 

我勒个去,font-size竟然变成0了。

 

按照我写的代码应该是能根据屏幕取到一定的数值,于是我开始在设置font-size的js代码中打断点,发现有些手机,document.documentElement.clientWidth刚开始会取到0,再过一会儿才是正常的数值,而我的font-size是基于这个clientWidth计算的,所以也就变成了0。

 

于是我设置了一个定时器,对clientWidth进行循环检测,当它有一定的数值的时候,我再设置html的font-size,这时问题得到了解决。

 

function setFontsize() {
    if (document.documentElement.clientWidth === 0) {
    	setTimeout(function() {
    		setFontsize();
    	}, 100);
    	return;
    }
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
}

setFontsize();

 

至此,这个Bug得到了修复,希望能帮助到遇到同样坑的朋友

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页