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

最新推荐文章于 2024-08-19 07:15:00 发布

yaoshuhong43

最新推荐文章于 2024-08-19 07:15:00 发布

阅读量6k

点赞数 2

文章标签： H5 Webview font-size为0 Android clientWidth

本文链接：https://blog.csdn.net/yaoshuhong43/article/details/87916324

版权

在开发H5项目并嵌入到Webview时，作者遇到了页面显示异常的问题。起初怀疑是网络原因，但通过模拟慢速网络并未重现。使用Chrome的Inspector工具在App中定位问题，发现在某些设备上，document.documentElement.clientWidth初值为0，导致基于其计算的font-size变为0，从而页面内容无法显示。通过设置定时器检查clientWidth，待其获取正常值后再设置font-size，成功解决了这个问题。

摘要由CSDN通过智能技术生成

楼主在写一个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';

})();

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

纳尼？我第一反应以为是网络速度太慢导致的问题，于是我使用了开