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

最新推荐文章于 2023-10-12 15:35:58 发布

置顶 D_evin_

最新推荐文章于 2023-10-12 15:35:58 发布

阅读量864

点赞数 2

文章标签：微信 javascript vue.js html5 页面混乱

本文链接：https://blog.csdn.net/D_evin_/article/details/130685998

版权

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>