关于微信安卓端网页字体适配的通知

2024-05-29 13:30| 来源: 网络整理| 查看: 265

为了提供给用户更好的阅读体验，微信安卓版 7.0.10 版本起，网页的字体会跟随微信设置里的字体大小更改而变化。

若调整字体变大或变小后，部分未适配网页的排版会出现显示错乱，建议未进行适配的开发者尽快完成对“ 字体大小” 的适配。

查看网页在字体不同大小下展示效果的方法：

方法1："设置">"通用">“字体大小">进行字体大小修改后查看对应网页显示效果。

方法2：在微信内访问对应网页右上角”…">底部菜单栏选择调整字体">进行字体大小修改后查看对应网页显示效果。

另外，对于现有的显示问题，我们提供以下方案让开发者临时将字体还原标准大小。同时，开发者可以在页面中提示用户在右上角”…”更多菜单中修改字体到合适的大小。

下列方案可以将字体还原标准大小，但我们仍然建议后续做字体适配来提高用户的阅读体验。『字体还原标准大小』方案：

我们提供了一个 JSAPI 用于设置字体大小，只需将字体大小等级设置为 2 （标准）即可，代码示例如下：

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(window.getComputedStyle($dom, null).getPropertyValue('font-size')); document.body.appendChild($dom); // 计算原字体和放大后字体的比例 var scaleFactor = 10 / scaledFontSize; // 取 html 元素的字体大小 var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size')); // 由于设置 font-size 后实际会变大，故 font-size 需设置为更小一级 document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';

【本文地址】

公司简介

联系我们