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

最新推荐文章于 2022-12-27 21:39:09 发布

weixin_34266504

最新推荐文章于 2022-12-27 21:39:09 发布

阅读量2k

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000012904244

版权

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

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

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

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

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

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

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

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

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

浏览器的放大字体功能在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为单位。

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

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

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

这种情况可以通过改变布局方式来避免。

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

weixin_34266504

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器字体大小改变(微信浏览器)影响页面布局问题

手机在系统设置和微信设置的通用设置中都提供放大字体功能，这两种设置都可以系统中字体和应用中字体的大小。此外在微信浏览器和其他一些浏览器中还提供手动设置浏览器字体大小，一旦用户设置放大字体，很多页面的布局就会错位，也是很尴尬了。正常情况下一个页面代码，输入栏的名称和输入框是百分比布局，左右浮动。在不同大小的设备上都可以正常显示。<...
复制链接

扫一扫

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

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

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

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

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

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

“相关推荐”对你有帮助么？