网页字体适配方案

微信安卓版 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';

转自:网页字体适配方案:网页字体适配方案

猜你喜欢

转载自blog.csdn.net/weixin_42215897/article/details/103820591