禁止微信內置瀏覽器修改頁面字體大小

今天遇到微信用戶修改了內置瀏覽器下字體大小後打開公衆號時致使佈局變亂，搜到的解決辦法記錄一下。

Android解決方法

/*
  * 頁面加入這段代碼可以使Android機器頁面再也不受到用戶字體縮放強制改變大小
  */
(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
            });
        });
    }
    
    document.body.addEventListener('touchmove', function(e) {
        e.preventDefault(); // 阻止默認的處理方式(阻止下拉滑動的效果)
    }, {passive: false});
})();

複製代碼

iOS解決方法

body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}
複製代碼