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

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