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

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

修复

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

var html = document.getElementsByTagName('html')[0];

var settedFs = settingFs = parseInt(html.style.fontSize);

var whileCount = 0;

while(true) {

var realFs = parseInt(window.getComputedStyle(html).fontSize);

var delta = realFs - settedFs;

if (Math.abs(delta) >= 1) //不相等

{

if (delta > 0) settingFs--; else settingFs++;

html.setAttribute('style', 'font-size:'+settingFs + 'px!important');

} else

break;

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

break

}

参考

AD：【快收录网】免费收录