微信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--- -->