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模式：

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

于是我感觉是嵌入到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得到了修复，希望能帮助到遇到同样坑的朋友