解决部分安卓机 自带浏览器 上h5页面 rem布局 受到 真机字体影响的问题

背景

最近有个 h5项目 由于真机（部分安卓手机）将字体调大 导致 h5 页面布局发生了错误

原因

影响了 内置 webview html 上 font-size 大小 （设置的大小 与 实际显示的 大小不一致） 例如 你将真机默认字体放大 html font-size 实际大小也会变大

解决

1.计算 出 真机环境下 放大 或缩小的比例
2. 再将 设置的 实际 的值 进行调整 重新设置 html的 font-size

白话 说的 就是  假设 你设置的 rem 为40px 而实际上 真机展示的是 50px 
这时候 你想要在真机上显示 40px 你就得 设置 40*（40/50）px = 32px 
这样 真机就会放大显示为 40px  问题就得到解决了

代码

以项目中最常见得 flexible.js 适配方案

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
        // 上面是源码
        
        // 下面是新加的


       // 通过getComputedStyle 获取浏览器 计算后的html font-size 真实大小
        let real_rem = ~~(window.getComputedStyle(docEl).fontSize.replace('px',''))
        
        // 再进行比较 不一致 则进行重新赋值 以达到不受真机字体大小 影响的效果
        if(rem !== real_rem) {
            docEl.style.fontSize = rem*(rem/real_rem) + 'px';
        }
        

    }