微信修改字體大小后h5頁面排版亂 解決辦法

在開發當中呢，經常會有很多H5的小活動頁面，需要在微信的環境下使用。偶爾會出現H5頁面在微信或者其他客戶端中出現字體變大的問題，下面提供解決方法。

 

首先先把網頁自動放大放小的關掉。

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

 安卓解決微信內置瀏覽器打開字體變大問題的方法：

    <script>
           (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() {
                   // 設置網頁字體為默認大小
                   WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
                   // 重寫設置網頁字體大小的事件
                   WeixinJSBridge.on('menu:setfont', function() {
                       WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
                   });
               }
           })();
    </script>

 

蘋果IOS系統解決微信內置瀏覽器打開字體變大問題的方法：

 

    /* IOS禁止微信調整字體大小 */
    body { 
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
    }