首页 前端知识 微信H5适配 解决微信调整字体大小导致H5页面混乱

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

2024-04-21 10:04:05 前端知识 前端哥 882 479 我要收藏

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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5538.html
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!