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

whataa 發布于2019-08-01 18:26 / 682人閱讀

摘要：對于這種情況我試過兩種解決方式禁止瀏覽器禁止調整瀏覽器字體大小行為優點這種方式可以完全還原頁面原本的布局樣式。一禁止調整瀏覽器字體大小瀏覽器的放大字體功能在系統和系統中調整瀏覽器字體的實現方式不同，所以要針對設置。

手機在系統設置和微信設置的通用設置中都提供放大字體功能，這兩種設置都可以系統中字體和應用中字體的大小。
此外在微信瀏覽器和其他一些瀏覽器中還提供手動設置瀏覽器字體大小，一旦用戶設置放大字體，很多頁面的布局就會錯位，也是很尷尬了。

正常情況下一個頁面代碼，輸入欄的名稱和輸入框是百分比布局，左右浮動。在不同大小的設備上都可以正常顯示。



    
    
    
    微信瀏覽器放大字體問題
    
    



    
        姓名: 
        
    
    
        電話: 
        
    
    
        電話: 
        
    
    完成提交

但是在瀏覽器的設置中設置字體大小后，頁面布局就錯位了。

對于這種情況我試過兩種解決方式：

禁止瀏覽器禁止調整瀏覽器字體大小行為

優點：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為單位。

二、改變布局適應瀏覽器字體的變化

改變布局適應瀏覽器字體變化要根據頁面實際布局結構來調整。
比較常見的情況比如：元素1和元素2浮動布局或直接是行內元素。在放大瀏覽器字體的字體后，兩個元素的寬度都可能超過原先設置的寬度，導致布局錯位。

這種情況可以通過改變布局方式來避免。

設置元素1固定的寬度，依據外部box靠左定位

設置外部box的padding-left為元素1的寬度

設置元素2的的寬度為外部box的100%

GPU云服務器云服務器 js改變標簽字體大小微信瀏覽器微信瀏覽器 webrtc 瀏覽器刷新問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51732.html

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

摘要：對于這種情況我試過兩種解決方式禁止瀏覽器禁止調整瀏覽器字體大小行為優點這種方式可以完全還原頁面原本的布局樣式。一禁止調整瀏覽器字體大小瀏覽器的放大字體功能在系統和系統中調整瀏覽器字體的實現方式不同，所以要針對設置。手機在系統設置和微信設置的通用設置中都提供放大字體功能，這兩種設置都可以系統中字體和應用中字體的大小。此外在微信瀏覽器和其他一些瀏覽器中還提供手動設置瀏覽器字體大小，一旦用...

goji 2019-08-22 13:53 評論0 收藏0
瀏覽器字體大小改變(微信瀏覽器)影響頁面布局問題

摘要：對于這種情況我試過兩種解決方式禁止瀏覽器禁止調整瀏覽器字體大小行為優點這種方式可以完全還原頁面原本的布局樣式。一禁止調整瀏覽器字體大小瀏覽器的放大字體功能在系統和系統中調整瀏覽器字體的實現方式不同，所以要針對設置。手機在系統設置和微信設置的通用設置中都提供放大字體功能，這兩種設置都可以系統中字體和應用中字體的大小。此外在微信瀏覽器和其他一些瀏覽器中還提供手動設置瀏覽器字體大小，一旦用...

20171112 2019-08-29 14:15 評論0 收藏0
移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
真的,移動端尺寸自適應與dpr無關

摘要：做移動端自適應時可能很多人都對自適應和之間的關系產生疑問也有一些人會疑慮比如我的自適應方案沒有加會不會出問題針對這些疑問我說一下我的見解。做移動端自適應時可能很多人都對自適應和dpr之間的關系產生疑問,也有一些人會疑慮比如我的自適應方案沒有加dpr會不會出問題,針對這些疑問我說一下我的見解。 1. 什么是尺寸自適應首先標題說的自適應,可能自適應在不同人眼里理解不同，特別與響應式的關...

omgdog 2019-08-22 18:19 評論0 收藏0