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