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