微信内浏览器或系统字体放大缩小,html页面布局错乱问题

微信浏览器可以调整过字体大小:

这样调整完字体,会导致样式上的错误。再次进入微信也是会记录到用户所用的字体大小。
解决办法禁止微信用户修改字体大小:

安卓:

<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>

ios:

body { /* IOS禁止微信调整字体大小 */
            -webkit-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            -moz-text-size-adjust: 100% !important;
}

参考资料:https://www.jianshu.com/p/22c9b810704b

https://blog.csdn.net/weixin_37242696/article/details/80732260?utm_source=blogxgwz3

猜你喜欢

转载自blog.csdn.net/Hiqingtian/article/details/84850345