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