瀏覽器字體大小改變(微信瀏覽器)影響頁面佈局問題

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