解决移动设备的字体被放大,导致页面排版错乱

作者: 分类: 前端 发布时间: 2021-04-26 20:40 浏览人数:31
 

在开发移动端页面的时候,之前一直没有测出这个问题。直到某天,在领导的手机上出现了排版错位的问题,拿着手机质问我的工作态度。
百度了一下发现,原来浏览器调整了字体大小,会放大网页的字体,从而导致排版混乱。通过设置可以禁止网页字体被放大:


禁止微信端字体放大(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 });
        });
    }
})();


禁止浏览器字体放大(CSS样式):

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



text-size-adjust 用来控制一些移动设备上的文本溢出算法。



不过,根据 MDN 网站的介绍,text-size-adjust 还是实验中的功能,不是所有的浏览器都会生效。


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!