WeChat H5 adaptation solves the confusion of the H5 page caused by WeChat adjusting the font size

iOS adds css attributes, and Android uses WeChat attributes to prevent it. It is best to use max-width, max-height or percentage for page image size

Add the following code in 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>