微信webview內(nèi)置了調(diào)整字體大小的功能，用戶可以根據(jù)實(shí)際情況進(jìn)行調(diào)節(jié)。但是這也會(huì)導(dǎo)致字體大小改變以后，出現(xiàn)頁面布局錯(cuò)亂的情況。

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

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

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

 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                // 設(shè)置網(wǎng)頁字體為默認(rèn)大小
14                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
15                // 重寫設(shè)置網(wǎng)頁字體大小的事件
16                WeixinJSBridge.on('menu:setfont', function() {
17                    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
18                });
19            }
20        })();
21 </script>
22 <!-- 強(qiáng)制禁止用戶修改微信客戶端的字體大小---end--- -->

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。