問題記錄：

       20210118，記錄一下一個(gè)小問題，收到來自同事的bug反饋，說我們的H5頁面，在微信內(nèi)置瀏覽器下顯示有問題，然后丟了個(gè)圖過來，發(fā)現(xiàn)里面文字很大，文字的位置也有點(diǎn)偏移，立刻聯(lián)想到是用戶把字體調(diào)大了，變成“老年模式”。這里我隨便找個(gè)頁面重現(xiàn)下類似的錯(cuò)亂效果，如下圖

         簡單寫了個(gè)測試頁面（rem布局），拿安卓和 ios 分別測了下，如下動(dòng)圖

從上面兩張動(dòng)圖可以發(fā)現(xiàn)：

       1. 安卓手動(dòng)調(diào)整字體的話，會(huì)使根元素的字體變化，導(dǎo)致整個(gè)頁面內(nèi)的元素的一些屬性變化，包括寬高字體等樣式屬性

       2. ios 手動(dòng)調(diào)整字體，只是單純的把文字的字體改變，并沒有改變根元素字體

       從上面的發(fā)現(xiàn)，我們的頁面相對(duì)于 ios 來說，如果頁面不復(fù)雜，在安卓下，顯示一般不會(huì)有太大異常，只是看到了頁面所有的元素都是被放大了。而在 ios 下，在一些元素定寬定高，并且加了 overflow:hidden 這樣的樣式屬性，則調(diào)整字體可能會(huì)出現(xiàn)文字被切割了，只顯示文字的一部分，就像這樣： ios下調(diào)大字體后→ ，不知道的人還以為是 “天汪”🤣

 解決辦法：

       通過搜索工具查找相關(guān)內(nèi)容，發(fā)現(xiàn)微信有一個(gè)可以覆蓋菜單里面“調(diào)整字體”功能的接口，不過我找了一下暫時(shí)沒有找到文檔入口，尤其是這個(gè) 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)頁字體為默認(rèn)大小
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
    // 重寫設(shè)置網(wǎng)頁字體大小的事件
    WeixinJSBridge.on('menu:setfont', function (e) {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
    });
  }
})();

       上面這部分的代碼我測試后，對(duì) ios 和安卓有效果，在調(diào)整字體里面，拖動(dòng)滑塊，并沒有對(duì)頁面產(chǎn)生影響。

       在 ios 下還可以使用這個(gè) css 屬性

body {
    -webkit-text-size-adjust: 100% !important;
}

       這個(gè)屬性（實(shí)驗(yàn)性功能），設(shè)置為100%，是為了關(guān)閉字體大小自動(dòng)調(diào)整功能。一般來說，安卓和 ios 的瀏覽器，當(dāng)我們橫向或者縱向顯示時(shí)，瀏覽器會(huì)自己改變當(dāng)前字體，以達(dá)到一個(gè)方便閱讀的效果。所以設(shè)置為100%，保持不變 （個(gè)人理解）。MDN對(duì)這個(gè)樣式屬性的一些說明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-size-adjust

解決后的效果

       加入那些代碼后，安卓和 ios 均不會(huì)受右上角菜單的“調(diào)整字體”功能的影響，如下圖所示

到此這篇關(guān)于HTML5在微信內(nèi)置瀏覽器下右上角菜單的調(diào)整字體導(dǎo)致頁面顯示錯(cuò)亂的問題的文章就介紹到這了,更多相關(guān)html5微信內(nèi)置瀏覽器調(diào)整字體頁面錯(cuò)亂內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論