1. 程式人生 > >微信內瀏覽器或系統字型放大縮小,html頁面佈局錯亂問題

微信內瀏覽器或系統字型放大縮小,html頁面佈局錯亂問題

微信瀏覽器可以調整過字型大小:

這樣調整完字型,會導致樣式上的錯誤。再次進入微信也是會記錄到使用者所用的字型大小。
解決辦法禁止微信使用者修改字型大小:

安卓:

<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