Android部分webview rem计算误差记录

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

Android部分webview rem计算误差记录
Android部分webview 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
            }

参考

lib-flexible
vConsole

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » Android部分webview rem计算误差记录

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活