浏览器字体大小改变(微信浏览器)影响页面布局问题

时间 2019-11-09

原文原文链接

手机在系统设置和微信设置的通用设置中都提供放大字体功能，这两种设置均可以系统中字体和应用中字体的大小。
此外在微信浏览器和其余一些浏览器中还提供手动设置浏览器字体大小，一旦用户设置放大字体，不少页面的布局就会错位，也是很尴尬了。css

正常状况下一个页面代码，输入栏的名称和输入框是百分比布局，左右浮动。在不一样大小的设备上均可以正常显示。html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>微信浏览器放大字体问题</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        html,body{margin: 0;}
        .fl{float: left;}
        .fr{float: right;}
        .clearfix {zoom: 1;}
        .clearfix:after {content: ".";width: 0;height: 0;visibility: hidden;display: block;clear: both;overflow:hidden;}
        .message{height: 100px;}
        .input-box{line-height: 30px; margin-top: 30px;padding: 0 10px;}
        .input-box label{}
        .input-box input{width:85%;height: 30px;font-size: 16px;}
        .footer-btn{position: fixed;bottom: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;color: #ffffff;background-color: #055DAD;}
    </style>
</head>
<body>
<div class="container">
    <div class="clearfix input-box">
        <label class="fl">姓名: </label>
        <input class="fr" type="text" placeholder="请输入姓名">
    </div>
    <div class="clearfix input-box">
        <label class="fl">电话: </label>
        <input class="fr" type="text" placeholder="请输入电话">
    </div>
    <div class="clearfix input-box">
        <label class="fl">电话: </label>
        <input class="fr" type="text" placeholder="请输入地址">
    </div>
    <div class="footer-btn">完成提交</div>
</div>
</body> 
</html>

可是在浏览器的设置中设置字体大小后，页面布局就错位了。jquery

对于这种状况我试过两种解决方式：

禁止浏览器禁止调整浏览器字体大小行为

优势：1. 这种方式能够彻底还原页面本来的布局样式。2. 实现简单，只需在页面上加一段css,一段JavaScript。
缺点：1. 由于经过代码执行完成可能形成页面闪烁，这个问题能够经过提早执行这段代码或者作加载完成前页面暂时不展现解决。2. 这种方式对那些真正须要放大浏览器字体的用户并不友好。web
改变布局适应适应这种调整浏览器字体大小行为

优势：1. 不准额外执行JavaScript代码。2. 用户能够选择调整浏览器字体,对于有这种需求的用户友好，目前像京东淘宝的移动web端都是使用这种方式。
缺点：1. 即便经过改变布局该应对变化，可是仍是会出现布局错位的状况。2. 实现起来较为复杂，须要在开发时一直考虑这个问题。chrome

1、禁止调整浏览器字体大小

浏览器的放大字体功能在iOS系统和Android系统中调整浏览器字体的实现方式不一样，因此要针对设置。参考富途Web开发团队https://futu.im/posts/2017-10...浏览器

iOS系统

在iOS系统中调整浏览器字体的字体大小是经过给body设置-webkit-text-size-adjust属性实现的，因此能够经过用优先级覆盖这个属性来禁止调整字体大小。微信

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

Android系统

在安卓系统中调整浏览器字体是经过改变字体大小。因此能够考虑将字体大小在设置的时候进行等比例缩小。例如，一个文字但愿以10px来进行渲染，当浏览器字体被放大两倍时，此时font-size会变为20px。所以咱们能够在取到这个放大比例以后，对原样式进行等比缩小，好比将原文字大小设置为5px，渲染的时候就变成了10px。
作这种处理时注意页面中使用rem为单位。app

<script>
   (function(){
        var $dom = document.createElement('div');
        $dom.style = 'font-size:10px;';
        document.body.appendChild($dom);
        // 计算出放大后的字体
        var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
        document.body.removeChild($dom);
        // 计算原字体和放大后字体的比例
        var scaleFactor = 10 / scaledFontSize;
        
        var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
        document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
    })();
</script>

2、改变布局适应浏览器字体的变化

改变布局适应浏览器字体变化要根据页面实际布局结构来调整。
比较常见的状况好比：元素1和元素2浮动布局或直接是行内元素。在放大浏览器字体的字体后，两个元素的宽度均可能超过原先设置的宽度，致使布局错位。

dom

这种状况能够经过改变布局方式来避免。布局

设置元素1固定的宽度，依据外部box靠左定位
设置外部box的padding-left为元素1的宽度
设置元素2的的宽度为外部box的100%

浏览器字体大小改变(微信浏览器)影响页面布局问题

对于这种状况我试过两种解决方式：

禁止浏览器禁止调整浏览器字体大小行为

改变布局适应适应这种调整浏览器字体大小行为

1、禁止调整浏览器字体大小

2、改变布局适应浏览器字体的变化