移動前端中常說的 viewport （視口）就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。其中涉及幾個重要概念是 dip （ device-independent pixel 設(shè)備邏輯像素 ）和 CSS 像素之間的關(guān)系。這里首先了解以下幾個概念。
layout viewport（布局視口）
一般移動設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個viewport 元標(biāo)簽，定義一個虛擬的layout viewport（布局視口），用于解決早期的頁面在手機(jī)上顯示的問題。iOS, Android基本都將這個視口分辨率設(shè)置為 980px，所以pc上的網(wǎng)頁基本能在手機(jī)上呈現(xiàn)，只不過元素看上去很小，一般默認(rèn)可以通過手動縮放網(wǎng)頁。
visual viewport（視覺視口）和物理像素
visual viewport（視覺視口）備物理屏幕的可視區(qū)域，屏幕顯示器的物理像素，同樣尺寸的屏幕，像素密度大的設(shè)備，硬件像素會更多。例如iPhone的物理像素：
iPhone5 ：640 * 1136
iPhone6：750 * 1334
iPhone6 Plus：1242 * 2208
ideal viewport（理想視口）和 dip （設(shè)備邏輯像素）
ideal viewport（理想視口）通常是我們說的屏幕分辨率。
dip （設(shè)備邏輯像素）跟設(shè)備的硬件像素?zé)o關(guān)的。一個 dip 在任意像素密度的設(shè)備屏幕上都占據(jù)相同的空間。
比如MacBook Pro的 Retina （視網(wǎng)膜）屏顯示器硬件像素是：2880 * 1800。當(dāng)你設(shè)置屏幕分辨率為 1920 * 1200 的時候，ideal viewport（理想視口）的寬度值是1920像素， 那么 dip 的寬度值就是1920。設(shè)備像素比是1.5（2880/1920）。設(shè)備的邏輯像素寬度和物理像素寬度（像素分辨率）的關(guān)系滿足如下公式：
邏輯像素寬度*倍率 = 物理像素寬度
而移動端手機(jī)屏幕通常不可以設(shè)置分辨率，一般都是設(shè)備廠家默認(rèn)設(shè)置的固定值，換句話說 dip 的值就是 ideal viewport（理想視口）（也就是分辨率）的值，比如，iPhone的屏幕分辨率：
iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x
iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
iPhone6 Plus ：分辨率 414 * 736，物理像素1242 * 2208，@3x，（注意，實際顯示圖像等比降低至1080×1920，具體原因我們文章最后會附帶介紹）
CSS像素
CSS像素（px）用于頁面布局的單位。樣式的像素尺寸（例如 width: 100px）是以CSS像素為單位指定的。CSS像素與 dip 的比例即為網(wǎng)頁的縮放比例，如果網(wǎng)頁沒有縮放，那么一個CSS像素就對應(yīng)一個 dip（設(shè)備邏輯像素） 。
使用viewport元標(biāo)簽控制布局
首先看一下viewport元標(biāo)簽極其屬性：
