微信浏览器或手机浏览器字体大小调整 导致H5页面布局错乱解决方案

手机在系统设置和微信设置的通用设置中都提供放大字体功能，这两种设置都可以系统中字体和应用中字体的大小。此外在微信浏览器和其他一些浏览器中还提供手动设置浏览器字体大小，开发过程中发现一个问题，一旦用户设置放大字体之后，会导致页面的字号变大，从而导致公众号内开发的H5页面布局错乱，解决方案如下：

1、iOS的解决方案：

在iOS系统中调整浏览器字体的字体大小是通过给body设置-webkit-text-size-adjust属性实现的，所以可以通过用优先级覆盖这个属性来禁止调整字体大小。

body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}

2、安卓系统的解决方案：

安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小，并且重写设置字体大小的方法，让用户不能在该网页下设置字体大小。

<script>
(function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    }
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke("setFontSizeCallback&", { "fontSize" : 0 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on("menu:setfont", function() {
            WeixinJSBridge.invoke("setFontSizeCallback", { "fontSize&" : 0 });
        });
    }
})();
</script>

不过，安卓的这个方法有个缺陷，页面先看到的是字体被放大的效果，然后闪回到正常的展示，估计1s，因为WeixinJSBridge初始化需要一点时间，要等到WeixinJSBridge初始化后才可以调用其的方法设置字体到默认大小。如果页面有loading的话，就不看不出来了。