什麼是Viewport
手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，
通常這個虛擬的“窗口”（viewport）比屏幕寬，
這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），
用戶可以通過平移和縮放來看網頁的不同部分。
移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支持。
例子
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
content內容
| 字段名稱 | 類型 | 描述 |
|---|---|---|
| width | number | device-width | 控制 viewport 的寬度 |
| height | number | device-width | 控制 viewport 的寬度 |
| initial-scale | device-width | 初始縮放比例，也即是當頁面第一次 load 的時候縮放比例 |
| maximum-scale | number | 允許用戶縮放到的最大比例 |
| minimum-scale | number | 允許用戶縮放到的最小比例 |
| user-scalable | yes | no | 用戶是否可以手動縮放 |
提示
如果不顯示地設置viewport，那麼width的默認爲980。
如果頁面的所有元素寬度都小於980，此時width爲980，如果頁面最寬的位置超過980，
那麼width等於最大寬度。總之，默認能將整個頁面從左到右顯示出來。
如果設置了viewport，比如，只單純地設置了user-scalable=no，
例如<meta name="viewport" content="user-scalable=no" />，
那麼ios下width還是按980顯示（即默認就會通過dpi縮放），
但android和winphone下卻不會再縮放了，瀏覽器分辨率和真實設置分辨率一致。
三種viewport
（1）layout viewport
如果把移動設備上瀏覽器的可視區域設爲viewport的話，
某些網站會因爲viewport太窄而顯示錯亂，
所以這些瀏覽器就默認會把viewport設爲一個較寬的值，比如980px，
使得即使是那些爲PC瀏覽器設計的網站也能在移動設備瀏覽器上正常顯示。
這個瀏覽器默認的viewport叫做 layout viewport。
layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。
（2）visual viewport
layout viewport的寬度是大於瀏覽器可視區域的寬度的，
所以還需要一個viewport來代表瀏覽器可視區域的大小，
這個viewport叫做 visual viewport。
visual viewport的寬度可以通過 document.documentElement.innerWidth來獲取。
（3）ideal viewport
ideal viewport是一個能完美適配移動設備的viewport。
首先，不需要縮放和橫向滾動條就能正常查看網站的所有內容；
其次，顯示的文字、圖片大小合適，
如14px的文字不會因爲在一個高密度像素的屏幕裏顯示得太小而無法看清，
無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都差不多。
這個viewport叫做 ideal viewport。
ideal viewport並沒有一個固定的尺寸，不同的設備有不同的ideal viewport。
例如，所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640。
ideal viewport 的意義在於，無論在何種分辨率的屏幕下，針對ideal viewport 而設計的網站，
不需要縮放和橫向滾動條都可以完美地呈現給用戶。
css中的1px並不等於設備的1px
在css中我們一般使用px作爲單位，在桌面瀏覽器中css的1個像素往往都是對應着電腦屏幕的1個物理像素，
這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。
但實際情況卻並非如此，css中的像素只是一個抽象的單位，
在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。
在爲桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。
在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率爲320x480，在iphone3上，
一個css像素確實是等於一個屏幕物理像素的。
後來隨着技術的發展，移動設備的屏幕像素密度越來越高，
從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，
但屏幕尺寸卻沒變化，這就意味着同樣大小的屏幕上，像素卻多了一倍，
這時，一個css像素是等於兩個物理像素的。其他品牌的移動設備也是這個道理。
例如安卓設備根據屏幕像素密度可分爲ldpi、mdpi、hdpi、xhdpi等不同的等級，
分辨率也是五花八門，安卓設備上的一個css像素相當於多少個屏幕物理像素，
也因設備的不同而不同，沒有一個定論。
還有一個因素也會引起css中px的變化，那就是用戶縮放。
例如，當用戶把頁面放大一倍，那麼css中1px所代表的物理像素也會增加一倍；
反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。
關於這點，在文章後面的部分還會講到。
在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，
它的官方的定義爲：設備物理像素和設備獨立像素的比例，
也就是 devicePixelRatio = 物理像素 / 獨立像素。
css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，
我們可以知道該設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，
devicePixelRatio的值爲2，也就是說1個css像素相當於2個物理像素。
但是要注意的是，devicePixelRatio在不同的瀏覽器中還存在些許的兼容性問題，
所以我們現在還並不能完全信賴這個東西，
具體的情況可以看下這篇文章
參考資料:
-
淺談meta viewport設置移動端自適應
-
viewport 詳解
