移動端佈局基礎viewport

劃重點

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

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 進行控制。
• 移動開發中必出場的定義

<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• 用來實現 ideal viewport 的效果。

總結

• 經過meta viewport 標籤的設置讓layout viewport 達到ideal viewport的效果。