微信內瀏覽器或系統字型放大縮小,html頁面佈局錯亂問題
阿新 • • 發佈:2018-12-06
微信瀏覽器可以調整過字型大小:
這樣調整完字型,會導致樣式上的錯誤。再次進入微信也是會記錄到使用者所用的字型大小。
解決辦法禁止微信使用者修改字型大小:
安卓:
<script type="text/javascript"> (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:
body { /* IOS禁止微信調整字型大小 */
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
參考資料:https://www.jianshu.com/p/22c9b810704b
https://blog.csdn.net/weixin_37242696/article/details/80732260?utm_source=blogxgwz3