在 PC 端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器視窗的寬度保持一致。在 CSS 標準文檔中，視口也被稱為初始包含塊，它是所有 CSS 百分比寬度推算的根源，給 CSS 佈局限制了一個最大寬度。 而移動端則較為複雜，它涉及到三個視口：佈局視口（Layout Viewport）、視覺視口（Vis ...
在 PC 端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器視窗的寬度保持一致。在 CSS 標準文檔中，視口也被稱為初始包含塊，它是所有 CSS 百分比寬度推算的根源，給 CSS 佈局限制了一個最大寬度。
而移動端則較為複雜，它涉及到三個視口：佈局視口（Layout Viewport）、視覺視口（Visual Viewport）和理想視口（Ideal Viewport）。
本文主要討論移動端中的視口。
1. 基本概念
1.1 兩種像素
像素是電腦屏幕中顯示特定顏色的最小區域。屏幕中的像素越多，同一範圍內能看到的內容就越多。或者說，當設備尺寸相同時，像素越密集，畫面就越精細。
那麼，當我們在 CSS 中為一個元素設置屬性 width: 250px; 時，會發生什麼？這個元素的寬度究竟是多少像素呢？
事實上，這裡已經涉及了兩種不同的像素：物理像素和 CSS 像素。
物理像素（設備像素，device pixels）
指的是設備屏幕的物理像素，任何設備的物理像素數量都是固定的。
CSS 像素（CSS pixels）
是 CSS 和 JS 中使用的一個抽象概念。它和物理像素之間的比例取決於屏幕的特性（是否為高密度）以及用戶進行的縮放，由瀏覽器自行換算。
在 Apple 的視網膜屏（Retina）中，每 4 個像素為一組，渲染出普通屏幕中一個像素顯示區域內的圖像，從而實現更為精細的顯示效果。此時， 250px 的元素跨越了 500 個物理像素的寬度。
如果用戶進行了放大，那麼一個 CSS 像素還將跨越更多的物理像素。
1.2 三種視口
移動端瀏覽器通常寬度是 240px~640px，而大多數為 PC 端設計的網站寬度至少為 800px，如果仍以瀏覽器視窗作為視口的話，網站內容在手機上看起來會非常窄。
因此，引入了佈局視口、視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度不再相關聯。
佈局視口（layout viewport）
一般移動設備的瀏覽器都預設設置了一個 viewport 元標簽，定義一個虛擬的佈局視口（layout viewport），用於解決早期的頁面在手機上顯示的問題。iOS, Android 基本都將這個視口解析度設置為 980px，所以 PC 上的網頁基本能在手機上呈現，只不過元素看上去很小，一般預設可以通過手動縮放網頁。
佈局視口的寬度/高度可以通過 document.documentElement.clientWidth / Height 獲取。
可以看到，預設的佈局視口寬度為 980px。如果要顯式設置佈局視口，可以使用 HTML 中的 meta 標簽：
<meta name="viewport" content="width=400">佈局視口使視口與移動端瀏覽器屏幕寬度完全獨立開。CSS 佈局將會根據它來進行計算，並被它約束。
視覺視口（visual viewport）
視覺視口是用戶當前看到的區域，用戶可以通過縮放操作視覺視口，同時不會影響佈局視口。
視覺視口和縮放比例的關係為：
當前縮放值 = 理想視口寬度 / 視覺視口寬度所以，當用戶放大時，視覺視口將會變小，CSS 像素將跨越更多的物理像素。
理想視口（ideal viewport）
佈局視口的預設寬度並不是一個理想的寬度，於是 Apple 和其他瀏覽器廠商引入了理想視口的概念，它對設備而言是最理想的佈局視口尺寸。顯示在理想視口中的網站具有最理想的寬度，用戶無需進行縮放。
理想視口的值其實就是屏幕解析度的值，它對應的像素叫做設備邏輯像素（device independent pixel, dip）。dip 和設備的物理像素無關，一個 dip 在任意像素密度的設備屏幕上都占據相同的空間。如果用戶沒有進行縮放，那麼一個 CSS 像素就等於一個 dip。
用下麵的方法可以使佈局視口與理想視口的寬度一致：
<meta name="viewport" content="width=device-width">實際上，這就是響應式佈局的基礎。
2. 視口的設置
我們可以使用視口元標簽（viewport meta 標簽）來進行佈局視口的設置。
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1">下麵是每個屬性的詳細說明：
| 屬性名 | 取值 | 描述 |
|---|---|---|
| width | 正整數或device-width | 定義視口的寬度，單位為像素 |
| height | 正整數或device-height | 定義視口的高度，單位為像素，一般不用 |
| initial-scale | [0.0-10.0] | 定義初始縮放值 |
| minimum-scale | [0.0-10.0] | 定義放大最大比例，它必須小於或等於maximum-scale設置 |
| maximum-scale | [0.0-10.0] | 定義縮小最小比例，它必須大於或等於minimum-scale設置 |
| user-scalable | yes / no | 定義是否允許用戶手動縮放頁面，預設值 yes |
有幾點值得註意：
- viewport 標簽只對移動端瀏覽器有效，對 PC 端瀏覽器是無效的
- 當縮放比例為 100% 時，dip 寬度 = CSS 像素寬度 = 理想視口的寬度 = 佈局視口的寬度
- 單獨設置 initial-scale 或 width 都會有相容性問題，所以設置佈局視口為理想視口的最佳方法是同時設置這兩個屬性
- 即使設置了 user-scalable = no，在 Android Chrome 瀏覽器中也可以強制啟用手動縮放
3. 一倍圖、二倍圖、三倍圖
MacBook Pro 視網膜屏（Retina）顯示器硬體像素是 2880px * 1800px。當設置屏幕解析度為 1920px * 1200px 的時候，理想視口的寬度值是 1920px， 那麼 dip 的寬度值就是 1920px。其與理想視口寬度的比值為1.5（2880/1920），這個比值叫做設備像素比：
邏輯像素寬度 * 設備像素比 = 物理像素寬度設備像素比可以通過 window.devicePixelRatio 來獲取，或者使用 CSS 中的 device-pixel-ratio。
下麵是常見的設備像素比：
- 普通密度桌面顯示屏：
devicePixelRatio = 1 - 高密度桌面顯示屏(Mac Retina)：
devicePixelRatio = 2 - 主流手機顯示屏：
devicePixelRatio = 2 or 3
對於一張 100px * 100px 的圖片，通過 CSS 設置其寬高：
{
width:100px;
height:100px;
}在普通顯示屏的電腦中打開是正常的，但假設在手機或 Retina 屏中打開，按照邏輯解析度來渲染，他們的 devicePixelRatio = 2，那麼就相當於拿 4 個物理像素來描繪 1 個電子像素。這等於拿一個2倍的放大鏡去看圖片，圖片就會變得模糊。
這時，就需要使用 @2x 甚至 @3x 圖來避免圖片的失真。
最後，本文僅涉及了移動端開發中視口的基本概念，具體細節可以參考 PPK 的大作《移動Web手冊》
PS：電子版可關註公眾號《代碼寫完了》，發送"ppk"獲取
