viewport的做用

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
maximum-scale：容許用戶縮放到的最大比例。
minimum-scale：容許用戶縮放到的最小比例。
user-scalable：用戶是否能夠手動縮放。

 

「viewport」，翻譯爲中文能夠叫作「視區」，因爲移動設備的屏幕通常都比PC小不少，webkit瀏覽器會將一個較大的「虛擬」窗口映射到移動設備的屏幕上，默認的虛擬窗口爲980像素寬（目前大部分網站的標準寬度），而後按必定的比例（3：1或2：1）進行縮放。也就是說當咱們加載一個普通網頁的時候，webkit會先以980像素的瀏覽器標準加載網頁，而後再縮小爲490像素的寬度。注意這個縮小是一個全局縮小，也就是頁面上的全部元素都會縮小。

 

經過view-port，咱們能夠人爲地改變webkit的視區。

<meta name="viewport" content="width=500"/>

 

固然，更好的方法是自動檢測移動設備屏幕大小，而後讓內容自適應。

<meta name="viewport" content="width=device-width" />