部分android手机webview中h5页面设计与真实字体大小不一致解决方案

摘要 首选，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';		
	}	
}

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