摘要
首选,h5页面是在所有web浏览器显示正常,采用rem弹性设置的前提下,个别android机出现的字体不一致,导致页面整体变大或变小的情况。H5的解决方案。

环境
部分android手机中webview内嵌h5页面
编辑工具HBuild X

经调试发现同一台手机,同样的代码

	var clientWidth = document.documentElement.clientWidth;
	var bodyWidth=$('body').width();

clientWidth是不一样的,比如有时是360,有时是1080.
而我们经常 clientWidth = document.documentElement.clientWidth计算rem与px的换算关系。因为clientWidth获取的值有差异时,计算的换算关系就不准确了,经过测试bodyWidth=$(‘body’).width()是一直不变的。当两个不一样时,建议采用bodywidth来计算,如下面代码。

function setPX(){	
	const html = document.getElementsByTagName('html')[0];
	const realFs = parseFloat(window.getComputedStyle(html).fontSize);
	var clientWidth = document.documentElement.clientWidth;
	var bodyWidth=$('body').width();
	var fontSize;	
	if(bodyWidth<clientWidth){
		clientWidth=bodyWidth;		
	}
	if (clientWidth >= 750) {
		document.documentElement.style.fontSize = '100px';
	} else {
		fontSize=clientWidth / 7.5;
		document.documentElement.style.fontSize = fontSize+'px';		
	}	
}

结语:
欢迎加入微信群一起学习讨论!

请添加图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐