關於viewport的概念:
web
先了解移動設備的屏幕尺寸和設備尺寸:spa
iPhone3 設備尺寸 320*480 ; 屏幕尺寸 320*480scala
iPhone4 設備尺寸 320*480 ; 屏幕尺寸 640*960code
iPhone5 設備尺寸 320*568 ; 屏幕尺寸 640*1136blog
從iPhone3到iPhone4,設備尺寸沒變的狀況下,屏幕尺寸放大了一倍;viewport也應運而生,即屏幕尺寸。get
示例:it
<meta name="viewport" content="..." />
關於 viewport 參數定義:class
<meta name=」viewport」 content=」 height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] />
width、height: 能夠定義值,或者 device-width | device-height 設備的寬高meta
initial-scale: 初始縮放比例,即頁面第一次 load 的時候縮放比例。這是一個浮點值,是頁面大小的一個乘數。例如,若是你設置初始縮放爲「1.0」,那麼,web頁面在展示的時候就會以target density分辨率的1:1來展示。若是你設置爲「2.0」,那麼這個頁面就會放大爲2倍。float
maximum-scale:容許用戶縮放到的最大比例。這也是一個浮點值,用以指出頁面大小與屏幕大小相比的最大乘數。例如,若是你將這個值設置爲「2.0」,那麼這個頁面與target size相比,最多能放大2倍。
minimum-scale:容許用戶縮放到的最小比例。
user-scalable:用戶是否能夠手動縮放,若是設置爲yes則是容許用戶對其進行改變,反之爲no。默認值是yes。
全部的縮放值都必須在0.01–10的範圍以內。
例:
1.設置屏幕寬度爲設備寬度,禁止用戶手動調整縮放;
2.設置屏幕密度爲高頻,中頻,低頻自動縮放,禁止用戶手動調整縮放。
maximum-scale都將被忽略,由於根本不可能縮放。
target-densitydpi:
一個屏幕像素密度是由屏幕分辨率決定的,一般定義爲每英寸點的數量(dpi)。Android支持三種屏幕像素密度:低像素密度,中像素密度,高像 素密度。一個低像素密度的屏幕每英寸上的像素點更少,而一個高像素密度的屏幕每英寸上的像素點更多。Android Browser和WebView默認屏幕爲中像素密度。
target-densitydpi 屬性的取值範圍