在移動設備上進行網頁的重構或開發(fā)，首先得搞明白的就是移動設備上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有關的meta標簽的使用，才能更好地讓我們的網頁適配或響應各種不同分辨率的移動設備。

　　一、viewport的概念

　　通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區(qū)域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認情況下，一般來講，移動設備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的后果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。

　　二、css中的1px并不等于設備的1px

　　在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環(huán)境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發(fā)展，移動設備的屏幕像素密度越來越高，從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在不同的瀏覽器中還存在些許的兼容性問題，所以我們現在還并不能完全信賴這個東西。