国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

goji / 1222人閱讀

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

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

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



    
    
    
    微信瀏覽器放大字體問題

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

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

禁止瀏覽器禁止調(diào)整瀏覽器字體大小行為

優(yōu)點：1. 這種方式可以完全還原頁面原本的布局樣式。2. 實現(xiàn)簡單，只需在頁面上加一段css,一段JavaScript。
缺點：1. 因為通過代碼執(zhí)行完成可能造成頁面閃爍，這個問題可以通過提前執(zhí)行這段代碼或者做加載完成前頁面暫時不展示解決。2. 這種方式對那些真正需要放大瀏覽器字體的用戶并不友好。

改變布局適應(yīng)適應(yīng)這種調(diào)整瀏覽器字體大小行為

優(yōu)點：1. 不許額外執(zhí)行JavaScript代碼。2. 用戶可以選擇調(diào)整瀏覽器字體,對于有這種需求的用戶友好，目前像京東淘寶的移動web端都是使用這種方式。
缺點：1. 即使通過改變布局該應(yīng)對變化，但是還是會出現(xiàn)布局錯位的情況。2. 實現(xiàn)起來較為復(fù)雜，需要在開發(fā)時一直考慮這個問題。

一、禁止調(diào)整瀏覽器字體大小

瀏覽器的放大字體功能在iOS系統(tǒng)和Android系統(tǒng)中調(diào)整瀏覽器字體的實現(xiàn)方式不同，所以要針對設(shè)置。參考富途W(wǎng)eb開發(fā)團隊https://futu.im/posts/2017-10...

iOS系統(tǒng)

在iOS系統(tǒng)中調(diào)整瀏覽器字體的字體大小是通過給body設(shè)置-webkit-text-size-adjust屬性實現(xiàn)的，所以可以通過用優(yōu)先級覆蓋這個屬性來禁止調(diào)整字體大小。

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

Android系統(tǒng)

在安卓系統(tǒng)中調(diào)整瀏覽器字體是通過改變字體大小。所以可以考慮將字體大小在設(shè)置的時候進行等比例縮小。例如，一個文字希望以10px來進行渲染，當(dāng)瀏覽器字體被放大兩倍時，此時font-size會變?yōu)?0px。因此我們可以在取到這個放大比例之后，對原樣式進行等比縮小，比如將原文字大小設(shè)置為5px，渲染的時候就變成了10px。
做這種處理時注意頁面中使用rem為單位。

二、改變布局適應(yīng)瀏覽器字體的變化

改變布局適應(yīng)瀏覽器字體變化要根據(jù)頁面實際布局結(jié)構(gòu)來調(diào)整。
比較常見的情況比如：元素1和元素2浮動布局或直接是行內(nèi)元素。在放大瀏覽器字體的字體后，兩個元素的寬度都可能超過原先設(shè)置的寬度，導(dǎo)致布局錯位。

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

設(shè)置元素1固定的寬度，依據(jù)外部box靠左定位

設(shè)置外部box的padding-left為元素1的寬度

設(shè)置元素2的的寬度為外部box的100%

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92582.html

相關(guān)文章

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

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

    whataa 評論0 收藏0

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

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

    20171112 評論0 收藏0

  • 移動端布局與適配

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

    Clect 評論0 收藏0

  • 真的,移動端尺寸自適應(yīng)與dpr無關(guān)

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

    omgdog 評論0 收藏0

發(fā)表評論

0條評論

goji

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<