微信浏览器字体缩放导致页面变形的解决方法

用户反馈说网页在微信浏览器内发生了变形导致了页面排版错位，排查了一下发现是由于微信设置了字体缩放，调整了字体大小，导致web页面的字体发生了变化，撑开了部分的div元素导致了页面的变形从而致使页面排版错位。

针对上面的问题，在网上查到了一种解决方法，测试了一了还是有效果。

在微信浏览器字体被调大导致页面错乱的解决办法

1、iOS系统解决方法

iOS系统解决方案比较简单，只需要用下面的CSS样式去覆盖微信的样式即可。

<style>
body { /* IOS禁止微信调整字体大小  73so.com */
    -webkit-text-size-adjust: 100% !important;
}
</style>

注：把上面的CSS样式代码，加入到页面头部的 head 标签内即可！

2、安桌系统解决方法

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

代码：

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

注：复制上面的JS代码，并将其放到网页头部的head标签内即可！