移動端佈局基礎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的效果。