移動前端中viewport(視口) 轉

移動前端中常說的 viewport （視口）就是瀏覽器顯示頁面內容的屏幕區域。其中涉及幾個重要概念是 dpi （ device-independent pixel 設備邏輯像素 ）和 CSS 像素之間的關係。

(1) layout viewport(佈局視口)

通常移動設備的瀏覽器都默認設置了一個viewport 元標籤，定義一個虛擬的layout viewport（佈局視口），用於解決早期的頁面在手機上顯示的問題。iOS, Android基本都將這個視口分辨率設置爲 980px，因此pc上的網頁基本能在手機上呈現，只不過元素看上去很小，通常默承認以經過手動縮放網頁。

(2) visual viewport(視覺視口)和物理像素

visual viewport（視覺視口）設備物理屏幕的可視區域，屏幕顯示器的物理像素，一樣尺寸的屏幕，像素密度大的設備，硬件像素會更多。例如iPhone的物理像素：

• iPhone5 ：640 * 1136
• iPhone6：750 * 1334
• iPhone6 Plus：1242 * 2208

(3) ideal viewport(理想視口)和dip(設備邏輯像素)

ideal viewport（理想視口）一般是咱們說的屏幕分辨率。

dpi （設備邏輯像素）跟設備的硬件像素無關的。一個 dpi 在任意像素密度的設備屏幕上都佔據相同的空間。

好比MacBook Pro的 Retina （視網膜）屏顯示器硬件像素是：2880 * 1800。當你設置屏幕分辨率爲 1920 * 1200 的時候，ideal viewport（理想視口）的寬度值是1920像素， 那麼 dpi 的寬度值就是1920。設備像素比是1.5（2880/1920）。設備的邏輯像素寬度和物理像素寬度（像素分辨率）的關係知足以下公式：

邏輯像素寬度*倍率 = 物理像素寬度

而移動端手機屏幕一般不能夠設置分辨率，通常都是設備廠家默認設置的固定值，換句話說 dpi 的值就是 ideal viewport（理想視口）（也就是分辨率）的值，好比，iPhone的屏幕分辨率：

1. iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x
2. iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
3. iPhone6 Plus ：分辨率 414 *  736，物理像素1242 * 2208，@3x，（注意，實際顯示圖像等比下降至1080×1920，具體緣由查看：http://www.css88.com/archives/5972）

(4) CSS像素

CSS像素（px）用於頁面佈局的單位。樣式的像素尺寸（例如 width: 100px）是以CSS像素爲單位指定的。CSS像素與 dpi 的比例即爲網頁的縮放比例，若是網頁沒有縮放，那麼一個CSS像素就對應一個 dpi（設備邏輯像素） 。

(5) 使用viewport元標籤控制佈局

首先看一下viewport元標籤極其屬性：

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; 

屬性名	取值	描述
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

 

width

width屬性被用來控制layout viewport（佈局視口）的寬度，layout viewport（佈局視口）寬度默認值是設備廠家指定的。iOS, Android基本都將這個視口分辨率設置爲 980px。咱們能夠 width=320 這樣設爲確切的像素數，也能夠設爲device-width這一特殊值，通常爲了自適應佈局，廣泛的作法是將width設置爲device-width，例如：

1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width=device-width 也就是將layout viewport（佈局視口）的寬度設置 ideal viewport（理想視口）的寬度。網頁縮放比例爲100%時，一個CSS像素就對應一個 dpi（設備邏輯像素），而layout viewport（佈局視口）的寬度，ideal viewport（理想視口）的寬度（一般說的分辨率），dpi 的寬度值是相等的。

height

與width相似，但實際上卻不經常使用。

initial-scale

initial-scale用於指定頁面的初始縮放比例：

1. <meta name="viewport" content="initial-scale=1.5" />

initial-scale=1 表示將layout viewport（佈局視口）的寬度設置爲 ideal viewport（理想視口）的寬度，initial-scale=1.5 表示將layout viewport（佈局視口）的寬度設置爲 ideal viewport（理想視口）的寬度的1.5倍。

maximum-scale

maximum-scale用於指定用戶可以放大的最大比例，例如

1. <meta name="viewport" content="initial-scale=1,maximum-scale=3" />

假設頁面的默認縮放值initial-scale是1，那麼用戶最終可以將頁面放大到這個初始頁面大小的3倍。

minimum-scale

相似maximum-scale的描述，不過minimum-scale是用來指定頁面縮小比例的。一般狀況下，不會定義該屬性的值，頁面過小將難以閱讀。

user-scalable

user-scalable來控制用戶是否能夠經過手勢對頁面進行縮放。該屬性的默認值爲yes，可被縮放，你也能夠將該值設置爲no，表示不容許用戶縮放網頁。例如：

1. <meta name="viewport" content="user-scalable=no" />