什麼是Viewport和device-width？

進行移動web開發已經有一年多的時間了，期間遇到了一些令人很困惑的東西。比如：

1. 我們經常使用的裡的viewport究竟是什麼意思，這裡的device-width跟我們用JS擷取到的屏寬的區別與聯絡分別是什麼，為什麼去掉<meta />標籤後頁面會變得很小很小？

2. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 為什麼很多解析度很大的螢幕寬度其實並不大，螢幕解析度與用JS擷取到的屏寬的區別與聯絡分別又是什嗎？

等等這些關於“像素”、關於“寬度”的一系列問題。

最近我翻了很多資料尋找關於“寬度”和“像素”的東西，總算感覺自己算是有點開竅了，這裡把我的一些理解分享出來，請求大家的批評與指正。當然，文章裡也有引用其他文章裡的句子。文章最後會把參考的一些文章連結貼出來，供大家參考～

CSS pixel與device pixels (css px與device px)

首先瞭解下什麼是CSS pixels/ 'pɪks(ə)l; -sel /，什麼是device pixels；

1． CSS pixels可以理解為css像素，是瀏覽器使用的抽象單位，主要用來在網頁上繪製內容。也可以說css px是專門為web開發人員提出的一個抽象概念，也只跟我們平時寫的css樣式有關，與解析度（比如720px*1280px）裡的px沒關係。

2．device pixels可以理解為是裝置像素，官方的解釋是：顯示螢幕的最小物理單位，每個dp包含自己的顏色、高寬等。

對於我們做web開發的人來說，我們用到的最多的地方是“css像素”，即類似width:300px;font-size:14px;這類的css語句裡用到的。它跟裝置自身的px是沒關係的。也就是說1個CSS 像素佔多少個物理像素是不確定的，這個問題通過頁面的放縮比較容易理解。比如一個普通的html頁面上，有一個300px的元素；如果我們放大頁面，元素會佔據更多的裝置像素（即device pixels），但它的CSS pixels不變，依然是300px；縮小頁面也是同樣的道理，佔據了更少的device pixels，但它的CSS pixels不變。也就是說，元素佔據了多少device pixels，是由當前頁面的放縮比例而定的。

不過，頁面的縮放對我們web開發來說是好像沒有任何意義的。但有一個問題，我們開發出來的頁面是想要在各個螢幕個以最佳的樣式展示出來的，我們不能讓頁面裡存在不能控制的元素。所以就出現了它：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 也就是我們在進行web開發的時候經常用到的viewport。那麼viewport到底是個什麼玩意兒呢，而且content裡面width為什麼要等於device-width呢，device-width又是個什麼概念呢？下面我們來看看它們哥倆兒是什麼。

Viewport 與 device-width

在解釋這兩個概念之前，先說一個大家都知道，但不明白為什麼的情況：把一個普通的在PC上開發的HTML頁面直接放手機上，你會發現不管多大的頁面都可以在小小的手機螢幕上顯示，但是圖文都會顯示的特別小；如果你用JAVASCRIPT擷取下頁面寬度，你會發現，大多數的頁面寬度都是980px的，這個就跟viewport有關。

Viewport起源於蘋果，但現在已經被大多數瀏覽器支援。關於viewport有兩個概念visual viewport跟layout viewport。這裡visual viewport也就是視覺上的視窗，可以理解為裝置自己的寬度。這時，如果你有一個長960的頁面，有一個元素是20%（實際解析出來就是192px）。但如果我用寬為320px的螢幕開啟呢，這個元素就成了64px，但是這個時候我設定的字型大小是12px，在320px的螢幕上就只能顯示64/12個字了～

鑒於這個問題，蘋果找到一種解決方案，在移動版的safari中定義了viewport meta標籤，它的作用就是建立一個虛擬視窗（viewport），這個虛擬視窗就是layout viewport解析度接近案頭顯示器，apple將其定位為980px。在手機上，可以通過document.documentElement.clientWidth來擷取。

其他瀏覽器廠商也有不同的解決辦法，例如UCweb是使用的中間技術。

另外據說，不同瀏覽器廠商對於layout viewport的大小都有自己的定義。但是，我用手上不多的幾個手機（小米2s、SONY、金立、ipad）測試的結果，都是980px。其中在小米2s上測試了小米內建瀏覽器、QQ瀏覽器、UC瀏覽器、Google瀏覽器，還有opera瀏覽器，結果都一樣；其他的手機上面不管裝了什麼瀏覽器，都測試了，結果都是980px。但是這個值對於我們web開發來說，好像也沒有什麼用處。

因為大多數情況下，<meta name="viewport" content="width=device-width" /> 這個標籤對我們來說是最給力的，可以讓我們的頁面裡的圖文顯示的是正常的，很大程度上提高了頁面的可讀性。而這一meta標籤的功能就是設定layout viewport為device-width的寬度。但是device-width具體是什麼呢？

第一代iphone的時候，解析度為320*480，螢幕尺寸為3.5寸（注意，這個3.5寸說的是螢幕的對角線寬），這時候device-width就是320px，也是手機的解析度寬，此時device-width就是裝置寬。但第二代的iphone解析度提高為了480*960，螢幕尺寸為依然為3.5寸，如果device-width還是裝置寬，那麼同樣是320px的頁面放480*960的手機屏上，圖文就會變得比較小，又會影響其可讀性。因此iphone的device-width一直維持在320px，ipad一直維持在1024px。這個時候，device-width就不是裝置寬了（也就不是解析度的寬了），是一個中介層。Android採用的也是這一概念，其device-width值以360居多，但也不乏有像540px和600px這樣的奇葩。在設定了<meta />標籤以後，device-width值可以用window.innerWidth來擷取device-width值。

有關DPI

dpi(Dots Per Inch)，有時也叫做ppi(Point Per Inch)，翻譯過來也叫像素密度，表示裝置每英寸所佔有的像素數；數值越高，即代表顯示屏能夠以越高的密度顯示映像。（註：這裡的像素，指的是device pixels。）DPI的計算公式：

有意思的是，這個值比蘋果官網上公布的326還有高一點點。

其中，PPI在120-160之間的手機被歸為低密度手機，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個上流的名字——retina）。

這些密度對應著一個特定的縮放比例值，拿我們最熟悉的iphone4或4s來說，它們的PPI是326，屬於超高密度的手機。當我們書寫一個寬度為320px的頁面放到iphone中顯示，你會發現，它竟然是滿寬的。這是因為，頁面被預設放大了兩倍，也就是640px，而iphone4或4s的寬，正是640px。

DevicePixelRadio

DevicePixelRadio，定義：window.devicePixelRatio是裝置上物理像素（也就是device-width）和裝置獨立像素（device-independent pixels，即dips）的比例。公式表示就是：window.devicePixelRatio = 物理像素/dips

Android 和 iPhone 中，都有一個占整個螢幕大小的換算單位，Android 中叫 dip 或 dp，iPhone 中叫 point。Dip，就是device independent pixels，裝置獨立像素。而裝置的物理像素和 dip 的比例就是 devicePixelRatio，此值可以通過 window.devicePixelRatio 屬性擷取。

據我尋找到的一些資料顯示，這裡的獨立像素的值其實就是device-width值。這個值也就是我們平時在手機上布局用的寬度，當然是在設定了<meta />標籤的前提下。

這裡為什麼提到devicePixelRatio這個概念呢？

因為當devicePixelRatio=1.5的時候，也就是說當螢幕解析度寬與device-width的比值為1.5時，某些手機內建的瀏覽器（特別是三星手機出現在最多）會出現1px的線解析成2px的bug，但是經測試同一部手機上安裝的UC瀏覽器一般不會有這個bug。關於這個bug，網上有一篇文章做了比較好的解釋：

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程