微信安卓版 7.0.10 版本起,网页的字体大小会跟随微信全局设置里的字体大小。若用户设置了较大字体后,可能导致网页的排版出现错乱,建议开发者做好较大字体的适配
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke("setFontSizeCallback", {
fontSize: '2'
});
}, false);
此外,若页面是用 rem 单位进行排版的(目前该做法更容易导致页面不可用),可以反向重置 font-size 的数值达到还原字体标准大小的目的。代码示例如下:
// 以下代码思路来源网络。同时尽量将代码放在 body 标签开头位置
var $dom = document.createElement('div');
$dom.style = 'font-size: 10px;';
document.body.appendChild($dom;
// 计算出放大后的字体
var scaledFontSize = parseInt(windowgetComputedStyle($dom, null.getPropertyValue('fontsize'));
document.body.removeChild($dom;
// 计算原字体和放大后字体的比例
var scaleFactor = 10 / scaledFontSize;
// 取 html 元素的字体大小
var originRootFontSize = parseInt(windowgetComputedStyledocumentdocumentElement, null.getPropertyValue('fontsize'));
// 由于设置 font-size 后实际会变大,故 font-size 需设置为更小一级
dcument.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
转自:网页字体适配方案:网页字体适配方案