hi,欢迎访问本站!
当前位置: 首页Web前端正文

微信浏览器字体缩放导致页面变形的解决方法

墨初 Web前端 928阅读

用户反馈说网页在微信浏览器内发生了变形导致了页面排版错位,排查了一下发现是由于微信设置了字体缩放,调整了字体大小,导致web页面的字体发生了变化,撑开了部分的div元素导致了页面的变形从而致使页面排版错位。

针对上面的问题,在网上查到了一种解决方法,测试了一了还是有效果。

在微信浏览器字体被调大导致页面错乱的解决办法

1、iOS系统解决方法

iOS系统解决方案比较简单,只需要用下面的CSS样式去覆盖微信的样式即可。

<style>
body { /* IOS禁止微信调整字体大小  73so.com */
    -webkit-text-size-adjust: 100% !important;
}
</style>

注:把上面的CSS样式代码,加入到页面头部的 head 标签内即可!

2、安桌系统解决方法

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

代码:

<script>
(function() {
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke("setFontSizeCallback&", { "fontSize" : 0 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on("menu:setfont", function() {
            WeixinJSBridge.invoke("setFontSizeCallback", { "fontSize&" : 0 });
        });
    }
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    }
})();
</script>

注:复制上面的JS代码,并将其放到网页头部的head标签内即可!

标签:
声明:无特别说明,转载请标明本文来源!
相关推荐