微信H5适配 解决微信调整字体大小导致H5页面混乱

ios通过添加css属性，安卓通过微信属性去阻止，页面图片大小最好使用max-width、max-height或者百分比

app.vue里添加以下代码：

<script>
//强制禁止用户修改微信客户端的字体大小
(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>
 
<style>
body,
html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}
</style>复制