淺談移動端中的視口（viewport）

在 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">

下面是每一個屬性的詳細說明：

<table> <thead> <tr> <th>屬性名</th> <th>取值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>width</td> <td>正整數或device-width</td> <td>定義視口的寬度，單位爲像素</td> </tr> <tr> <td>height</td> <td>正整數或device-height</td> <td>定義視口的高度，單位爲像素，通常不用</td> </tr> <tr> <td>initial-scale</td> <td>[0.0-10.0]</td> <td>定義初始縮放值</td> </tr> <tr> <td>minimum-scale</td> <td>[0.0-10.0]</td> <td>定義放大最大比例，它必須小於或等於maximum-scale設置</td> </tr> <tr> <td>maximum-scale</td> <td>[0.0-10.0]</td> <td>定義縮小最小比例，它必須大於或等於minimum-scale設置</td> </tr> <tr> <td>user-scalable</td> <td>yes / no</td> <td>定義是否容許用戶手動縮放頁面，默認值 yes</td> </tr> </tbody> </table>

有幾點值得注意：

• 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"獲取