什么是Viewport
手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網(wǎng)頁開發(fā)者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支持。
Viewport 基礎
一個常用的針對移動網(wǎng)頁優(yōu)化過的頁面的 viewport meta 標簽大致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放
動態(tài)改變meta viewport標簽
- 可以使用document.write來動態(tài)輸出meta viewport標簽，例如：
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
- 通過setAttribute來改變
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>
css中的1px并不等于設備的1px
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環(huán)境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網(wǎng)頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發(fā)展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據(jù)屏幕像素密度可分為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在不同的瀏覽器中還存在些許的兼容性問題，所以我們現(xiàn)在還并不能完全信賴這個東西，具體的情況可以看下這篇文章。
devicePixelRatio的測試結(jié)果：
要點總結(jié)
如果不設置meta viewport標簽，那么移動設備上瀏覽器默認的寬度值為800px，980px，1024px等這些，總之是大于屏幕寬度的。這里的寬度所用的單位px都是指css中的px，它跟代表實際屏幕物理像素的px不是一回事。
每個移動設備瀏覽器中都有一個理想的寬度，這個理想的寬度是指css中的寬度，跟設備的物理寬度沒有關系，在css中，這個寬度就相當于100%的所代表的那個寬度。我們可以用meta標簽把viewport的寬度設為那個理想的寬度，如果不知道這個設備的理想寬度是多少，那么用device-width這個特殊值就行了，同時initial-scale=1也有把viewport的寬度設為理想寬度的作用。所以，我們可以使用
<meta name="viewport" content="width=device-width, initial-scale=1">
來得到一個理想的viewport（也就是前面說的ideal viewport）。
- 在iphone和ipad上，無論你給viewport設的寬的是多少，如果沒有指定默認的縮放值，則iphone和ipad會自動計算這個縮放值(即 initial-scale)，以達到當前頁面不會出現(xiàn)橫向滾動條(或者說viewport的寬度就是屏幕的寬度)的目的。
- ideal viewport并沒有一個固定的尺寸，不同的設備擁有有不同的ideal viewport。所有的iphone的ideal viewport寬度都是320px，無論它的屏幕寬度是320還是640，也就是說，在iphone中，css中的320px就代表iphone屏幕的寬度。
但是安卓設備就比較復雜了，有320px的，有360px的，有384px的等等，關于不同的設備ideal viewport的寬度都為多少，可以到http://viewportsizes.com去查看一下，里面收集了眾多設備的理想寬度。
