問(wèn)題記錄：
20210118，記錄一下一個(gè)小問(wèn)題，收到來(lái)自同事的bug反饋，說(shuō)我們的H5頁(yè)面，在微信內(nèi)置瀏覽器下顯示有問(wèn)題，然后丟了個(gè)圖過(guò)來(lái)，發(fā)現(xiàn)里面文字很大，文字的位置也有點(diǎn)偏移，立刻聯(lián)想到是用戶(hù)把字體調(diào)大了，變成“老年模式”。這里我隨便找個(gè)頁(yè)面重現(xiàn)下類(lèi)似的錯(cuò)亂效果，如下圖
這是隨便掃的一個(gè)頁(yè)面，調(diào)大字體后的顯示效果 測(cè)試案例以及簡(jiǎn)單的推斷：
簡(jiǎn)單寫(xiě)了個(gè)測(cè)試頁(yè)面（rem布局），拿安卓和 ios 分別測(cè)了下，如下動(dòng)圖
安卓 
ios
從上面兩張動(dòng)圖可以發(fā)現(xiàn)：
1. 安卓手動(dòng)調(diào)整字體的話(huà)，會(huì)使根元素的字體變化，導(dǎo)致整個(gè)頁(yè)面內(nèi)的元素的一些屬性變化，包括寬高字體等樣式屬性
2. ios 手動(dòng)調(diào)整字體，只是單純的把文字的字體改變，并沒(méi)有改變根元素字體
從上面的發(fā)現(xiàn)，我們的頁(yè)面相對(duì)于 ios 來(lái)說(shuō)，如果頁(yè)面不復(fù)雜，在安卓下，顯示一般不會(huì)有太大異常，只是看到了頁(yè)面所有的元素都是被放大了。而在 ios 下，在一些元素定寬定高，并且加了 overflow:hidden 這樣的樣式屬性，則調(diào)整字體可能會(huì)出現(xiàn)文字被切割了，只顯示文字的一部分，就像這樣：
ios下調(diào)大字體后→
，不知道的人還以為是 “天汪”🤣
解決辦法：
通過(guò)搜索工具查找相關(guān)內(nèi)容，發(fā)現(xiàn)微信有一個(gè)可以覆蓋菜單里面“調(diào)整字體”功能的接口，不過(guò)我找了一下暫時(shí)沒(méi)有找到文檔入口，尤其是這個(gè) setFontSizeCallback 希望有知道的可以說(shuō)一下
(function () {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 設(shè)置網(wǎng)頁(yè)字體為默認(rèn)大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
// 重寫(xiě)設(shè)置網(wǎng)頁(yè)字體大小的事件
WeixinJSBridge.on('menu:setfont', function (e) {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
});
}
})();
上面這部分的代碼我測(cè)試后，對(duì) ios 和安卓有效果，在調(diào)整字體里面，拖動(dòng)滑塊，并沒(méi)有對(duì)頁(yè)面產(chǎn)生影響。
在 ios 下還可以使用這個(gè) css 屬性
body {
-webkit-text-size-adjust: 100% !important;
}
這個(gè)屬性（實(shí)驗(yàn)性功能），設(shè)置為100%，是為了關(guān)閉字體大小自動(dòng)調(diào)整功能。一般來(lái)說(shuō)，安卓和 ios 的瀏覽器，當(dāng)我們橫向或者縱向顯示時(shí)，瀏覽器會(huì)自己改變當(dāng)前字體，以達(dá)到一個(gè)方便閱讀的效果。所以設(shè)置為100%，保持不變 （個(gè)人理解）。MDN對(duì)這個(gè)樣式屬性的一些說(shuō)明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-size-adjust
解決后的效果
加入那些代碼后，安卓和 ios 均不會(huì)受右上角菜單的“調(diào)整字體”功能的影響，如下圖所示
安卓
ios
到此這篇關(guān)于HTML5在微信內(nèi)置瀏覽器下右上角菜單的調(diào)整字體導(dǎo)致頁(yè)面顯示錯(cuò)亂的問(wèn)題的文章就介紹到這了,更多相關(guān)html5微信內(nèi)置瀏覽器調(diào)整字體頁(yè)面錯(cuò)亂內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
