<center id="co2sm"></center>

移動端布局基礎viewport

learning 發布于2019-08-30 14:23 / 2109人閱讀

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

劃重點

手機屏幕相對著桌面瀏覽器小，傳統網頁的設計在手機上體驗糟糕

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

虛擬窗口layout viewport

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

document.documentElement.clientWidth

視覺窗口visual viewport

瀏覽器可視區域大小。可理解為手機物理屏幕。寬度可通過 Js 獲取(不支持Android2, Opera Mini, UC8)

ideal viewport

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

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

移動開發中必出場的定義

用來實現 ideal viewport 的效果。

總結

通過meta viewport 標簽的設置讓layout viewport 達到ideal viewport的效果。

GPU云服務器云服務器移動端布局 viewport布局 web移動端布局移動端

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

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

移動端布局基礎viewport

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

yanest 2019-08-02 10:07 評論0 收藏0
0基礎學習移動端適配

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

Galence 2019-08-02 11:24 評論0 收藏0
淺談移動端中的視口（viewport）

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

LucasTwilight 2019-08-02 11:38 評論0 收藏0
淺談移動端中的視口（viewport）

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

selfimpr 2019-04-23 13:19 評論0 收藏0