微信小程序的页面因为微信系统设置的大字体导致排版错误

最近手机端页面有客户反馈,说页面崩溃,乱的不行.

如下图

                                 

登陆后发现在我的手机里是正常的,然后客户的截图字体大的不行,一问才知道设置了微信系统中的最大字体,其实最简单的就是字体调回标准字体或者将字体字号变小一些.但是,人家是客户诶.

系统当然要有适用性

简单粗暴的解法:禁止在程序页面使用大字体,就是设置我的页面格式不受微信系统设置的影响

这个方法有一个弊端,就是打开页面后会先有乱码的页面,过了大概一秒钟以后页面就会恢复正常的格式.然后呢要放在<body>下面(这个里面没有代码注释,需要注释的小伙伴可以去看一下其他人的)

<body style="background:#fff">
<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>

设置完成后,微信系统的大字体就不会再影响页面了

这是设置完成后同样是设置成大字体的页面

猜你喜欢

转载自blog.csdn.net/weixin_47035997/article/details/125953304
今日推荐