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

資訊專欄INFORMATION COLUMN

移動端布局基礎(chǔ)viewport

learning / 2123人閱讀

摘要：虛擬窗口移動瀏覽器默認情況下把設(shè)置為一個比較寬的值防止太窄而在可視區(qū)域中顯示錯亂。寬度可通過獲取不支持一個完美適配移動設(shè)備的。移動端默認使用的是，而我們想要達到類似的效果的話，可以通過標(biāo)簽來對進行控制。

劃重點

手機屏幕相對著桌面瀏覽器小，傳統(tǒng)網(wǎng)頁的設(shè)計在手機上體驗糟糕

Apple 在移動版 Safari 中定義了 viewport meta 標(biāo)簽(如果沒記錯最早提出的話)，用于創(chuàng)建一個虛擬窗口（layout viewport），這個虛擬窗口的分辨率接近于桌面顯示器，Apple將其定義為980px。然后將虛擬窗口映射到移動設(shè)備的屏幕上，按比例縮放并重新渲染網(wǎng)頁。
虛擬窗口layout viewport

移動瀏覽器默認情況下把 viewport 設(shè)置為一個比較寬的值（防止太窄而在可視區(qū)域中顯示錯亂）。該默認的 viewport 稱為
layout viewport。寬度可通過 Js 獲取(基本所有設(shè)備都支持)

document.documentElement.clientWidth
視覺窗口visual viewport

瀏覽器可視區(qū)域大小?？衫斫鉃槭謾C物理屏幕。寬度可通過 Js 獲取(不支持Android2, Opera Mini, UC8)

ideal viewport

一個完美適配移動設(shè)備的 viewport。理想狀態(tài)是不需要用戶縮放和橫向滾動條就能正常查看，顯示的文字大小合適，不區(qū)分分辨率，屏幕密度等。

移動端默認使用的是 layout viewport ，而我們想要達到類似 ideal viewport 的效果的話，可以通過 meta標(biāo)簽來對 viewport 進行控制。

移動開發(fā)中必出場的定義

用來實現(xiàn) ideal viewport 的效果。

總結(jié)

通過meta viewport 標(biāo)簽的設(shè)置讓layout viewport 達到ideal viewport的效果。

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

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

相關(guān)文章

  • 移動端布局基礎(chǔ)viewport

    摘要：虛擬窗口移動瀏覽器默認情況下把設(shè)置為一個比較寬的值防止太窄而在可視區(qū)域中顯示錯亂。寬度可通過獲取不支持一個完美適配移動設(shè)備的。移動端默認使用的是，而我們想要達到類似的效果的話，可以通過標(biāo)簽來對進行控制。 劃重點 手機屏幕相對著桌面瀏覽器小，傳統(tǒng)網(wǎng)頁的設(shè)計在手機上體驗糟糕 Apple 在移動版 Safari 中定義了 viewport meta 標(biāo)簽(如果沒記錯最早提出的話)，用于創(chuàng)建一...

    yanest 評論0 收藏0

  • 0基礎(chǔ)學(xué)習(xí)移動端適配

    摘要：布局視口就是移動設(shè)備上用來裝載我們的網(wǎng)頁的那一塊區(qū)域。最常見的寬度是。雖說是沒有滾動條，但是端能友好顯示的頁面，在移動端上就顯示的很怪異。 這是關(guān)于移動端適配的第一篇文章，這篇文章主要介紹視口以及和視口有關(guān)的meta標(biāo)簽的使用。 不管三七二十一，我們先新建一個頁面： 這不是一個demo *{mar...

    Galence 評論0 收藏0

  • 淺談移動端中的視口（viewport）

    摘要：在端，視口指的是瀏覽器的可視區(qū)域，其寬度和瀏覽器窗口的寬度保持一致。本文主要討論移動端中的視口。因此，引入了布局視口視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度不再相關(guān)聯(lián)。 在 PC 端，視口指的是瀏覽器的可視區(qū)域，其寬度和瀏覽器窗口的寬度保持一致。在 CSS 標(biāo)準(zhǔn)文檔中，視口也被稱為初始包含塊，它是所有 CSS 百分比寬度推算的根源，給 CSS 布局限制了一個最大寬度。...

    LucasTwilight 評論0 收藏0

  • 淺談移動端中的視口（viewport）

    摘要：在端，視口指的是瀏覽器的可視區(qū)域，其寬度和瀏覽器窗口的寬度保持一致。本文主要討論移動端中的視口。因此，引入了布局視口視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度不再相關(guān)聯(lián)。在 PC 端，視口指的是瀏覽器的可視區(qū)域，其寬度和瀏覽器窗口的寬度保持一致。在 CSS 標(biāo)準(zhǔn)文檔中，視口也被稱為初始包含塊，它是所有 CSS 百分比寬度推算的根源，給 CSS 布局限制了一個最大寬度。 而移動...

    selfimpr 評論0 收藏0

發(fā)表評論

0條評論

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