html微信网页字体被放大问题

最新推荐文章于 2023-12-26 11:18:57 发布

小雍雍

最新推荐文章于 2023-12-26 11:18:57 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：样式CSS 文章标签： html css

本文链接：https://blog.csdn.net/yongyafang123/article/details/105368118

样式CSS 专栏收录该内容

11 篇文章

订阅专栏

针对安卓低版本机型在微信中打开HTML链接时字体异常增大的问题，本文提供了通过WeixinJSBridge设置字体回调的解决方案，同时指出了解决方案的缺陷及iOS设备的处理方法。

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

问题：
某些机型（基本是安卓的低版本机型）在微信中打开链接html，页面字体巨大

原因：
1、一种情况是，该手机设置了字体大小，为超大字体；
2、其他（暂不知）

解决办法：

<script>
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                    // alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                // alert(JSON.stringify(res));
            });
        },0);
    }
})();
   </script>

不管是因为什么原因,不管啥字被放大 ,解决办法是禁止微信页面字体放大
然后把下面的代码整进去很好使！但是这个方法有缺陷：

页面会先看到的是字体被放大的效果，然后闪回到正常的展示，估计1s，是因为WeixinJSBridge初始化需要一点时间，要等到WeixinJSBridge初始化后才可以调用其的方法设置字体到默认大小

iOS 如果存在的话可以用下面方式处理：

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