亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

yanest / 729人閱讀

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

劃重點(diǎn)

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

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

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

document.documentElement.clientWidth
視覺窗口visual viewport

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

ideal viewport

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

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

移動(dòng)開發(fā)中必出場(chǎng)的定義

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

總結(jié)

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

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

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

相關(guān)文章

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

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

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

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

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

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

  • 淺談移動(dòng)端中的視口（viewport）

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

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

  • 淺談移動(dòng)端中的視口（viewport）

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

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

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

0條評(píng)論

yanest

男|高級(jí)講師

TA的文章

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