androidwebviewrem,Android部分webviewrem计算误差记录

上周做了一个原生H5小游戏页面&＃xff0c;使用rem来布局&＃xff0c;然后在三星和华为的部分机型里面出现了rem计算出现误差的情况&＃xff0c;截图如下

在页面rem计算完成后&＃xff0c;用两种方式获取font-size。然后结果不一样&＃xff0c;导致某些元素通过rem计算后的值&＃xff0c;产生了误差

修复

通过比较document.documentElement.style.fontSize和window.getComputedStyle(document.documentElement)[“font-size”]的差值&＃xff0c;如果误差大于1&＃xff0c;我们就重置html的font-size

var html &＃61; document.getElementsByTagName(&＃39;html&＃39;)[0];

var settedFs &＃61; settingFs &＃61; parseInt(html.style.fontSize);

var whileCount &＃61; 0;

while(true) {

var realFs &＃61; parseInt(window.getComputedStyle(html).fontSize);

var delta &＃61; realFs - settedFs;

if (Math.abs(delta) >&＃61; 1) //不相等

{

if (delta > 0) settingFs--; else settingFs&＃43;&＃43;;

html.setAttribute(&＃39;style&＃39;, &＃39;font-size:&＃39;&＃43;settingFs &＃43; &＃39;px!important&＃39;);

} else

break;

if (whileCount&＃43;&＃43; > 100) //之所以弄个100的循环跳出的原因&＃xff0c;在于实在无法预判设备是否能计算得到36px&＃xff0c;比如设备只能计算35px&＃xff0c;37px&＃xff0c;这样会死循环只能跳出了

break

}

参考

AD&＃xff1a;【快收录网】免费收录