禁止微信内置浏览器修改页面字体大小

今天遇到微信用户修改了内置浏览器下字体大小后打开公众号时致使布局变乱，搜到的解决办法记录一下。

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;
}
复制代码