移動前端中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" />

移動前端中viewport(視口)