微信webview內置了調整字體大小的功能，用戶可以根據實際情況進行調節。但是這也會導致字體大小改變以后，出現頁面布局錯亂的情況。

1、iOS的解決方案是覆蓋掉微信的樣式：

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

2、安卓手機禁止微信客戶端修改字體大小：

 1 <script>
 2        (function() {
 3            if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
 4                handleFontSize();
 5            } else {
 6                if (document.addEventListener) {
 7                    document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
 8                } else if (document.attachEvent) {
 9                    document.attachEvent("WeixinJSBridgeReady", handleFontSize);
10                    document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
11            }
12            function handleFontSize() {
13                // 設置網頁字體為默認大小
14                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
15                // 重寫設置網頁字體大小的事件
16                WeixinJSBridge.on('menu:setfont', function() {
17                    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
18                });
19            }
20        })();
21 </script>
22 <!-- 強制禁止用戶修改微信客戶端的字體大小---end--- -->

總結

以上是生活随笔為你收集整理的微信放大字体导致页面样式布局全乱的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。