禁止微信内置浏览器调整字体大小，从而保证页面不错乱

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

红孩儿2011

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

阅读量878

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_26642611/article/details/104671477

本文介绍了解决微信浏览器中网页字体大小被用户调整的问题。对于iOS设备，通过覆盖样式禁止字体调整；安卓设备则利用WeixinJSBridge对象设置字体大小为默认，并阻止用户调整。但此方法在特定场景下仍可能导致页面显示异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前iOS的解决方案是覆盖掉微信的样式：

body {
    -webkit-text-size-adjust: 100% !important;
}

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


　　　　　//android禁止微信浏览器调整字体大小
        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 });
            });
        }