h5页面在微信中打开，字体显示不正常

最新推荐文章于 2023-11-02 11:29:39 发布

不平凡中的平凡

最新推荐文章于 2023-11-02 11:29:39 发布

阅读量3.2k

点赞数

分类专栏： h5 微信文章标签： H5页面在微信中打开字体显示不正常

原文链接：http://html.zhizuobiao.com/html-18081300119/

版权

h5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

微信

2 篇文章 0 订阅

订阅专栏

h5页面在微信中打开，页面打开时字体正常显示，加载完成字体变大或者变小（其他浏览器均正常显示）。
原因是调整了微信中页面字体大小，如下图所示：
在这里插入图片描述
如果不想在微信中打开的H5页面字体变大或者变小而影响整体布局（即禁止网页字体被放大），在页面中加入如下逻辑（引入weixin.js文件）：

<body>
    @RenderBody() //可忽略
     <script type="text/javascript">
        (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>     

</body>