为了提供给用户更好的阅读体验,微信安卓版 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';
我给我的老母亲买了部手机,而我的老母亲却像产品经理一样和我说了一句,这个字给我弄大点看不清楚!!
我太南了,要改代码不说,评论还被删了,哭泣泣 TTTTTATTTTT
用flexible做的rem适配怎么破
WDNMD
要刷新一下才能生效,怎么回事
如果是vw适配方案该怎么办?
emmmmmmmmmm 删帖了刚刚
rem的情况下不生效
rem下的这个方案是不可取的,你把根节点的font-size改了,那对应的所有使用rem单位的html元素样式值都改了,要知道字体缩放只会影响内有字体元素的容器元素,比如2个div:<div id='id1'><div> <div id='id2'>11<div>,字体缩放只可能会影响id2的尺寸大小变化,但对id1是没有任何影响的,你现在这样整体改font-size,会影响所有元素
setFontSizeCallback 测试不能生效呀,还是上一次设置的值