成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

whataa / 695人閱讀

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

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

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



    
    
    
    微信瀏覽器放大字體問(wèn)題

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

對(duì)于這種情況我試過(guò)兩種解決方式：

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

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

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

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

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

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

iOS系統(tǒng)

在iOS系統(tǒng)中調(diào)整瀏覽器字體的字體大小是通過(guò)給body設(shè)置-webkit-text-size-adjust屬性實(shí)現(xiàn)的，所以可以通過(guò)用優(yōu)先級(jí)覆蓋這個(gè)屬性來(lái)禁止調(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)整瀏覽器字體是通過(guò)改變字體大小。所以可以考慮將字體大小在設(shè)置的時(shí)候進(jìn)行等比例縮小。例如，一個(gè)文字希望以10px來(lái)進(jìn)行渲染，當(dāng)瀏覽器字體被放大兩倍時(shí)，此時(shí)font-size會(huì)變?yōu)?0px。因此我們可以在取到這個(gè)放大比例之后，對(duì)原樣式進(jìn)行等比縮小，比如將原文字大小設(shè)置為5px，渲染的時(shí)候就變成了10px。
做這種處理時(shí)注意頁(yè)面中使用rem為單位。

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

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

這種情況可以通過(guò)改變布局方式來(lái)避免。

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51732.html

相關(guān)文章

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

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

    goji 評(píng)論0 收藏0

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

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

    20171112 評(píng)論0 收藏0

  • 移動(dòng)端布局與適配

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

    Clect 評(píng)論0 收藏0

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

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

    omgdog 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<