背景

最近有个 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';}}