內容轉自 http://www.cnblogs.com/koukouyifan/p/4066567.html 非常感謝 口口一凡 為我們提供的這篇文章，受益匪淺，特地轉到自己的博客收藏起來。 以下是原文內容。 進行移動web開發已經有一年多的時間了，期間遇到了一些令人很困惑的東西。比如： 等等這些關 ...
內容轉自 http://www.cnblogs.com/koukouyifan/p/4066567.html
非常感謝 口口一凡 為我們提供的這篇文章，受益匪淺，特地轉到自己的博客收藏起來。
以下是原文內容。
進行移動web開發已經有一年多的時間了，期間遇到了一些令人很困惑的東西。比如：
- 我們經常使用的<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">里的viewport究竟是什麼意思，這裡的device-width跟我們用JS獲取到的屏寬的區別與聯繫分別是什麼，為什麼去掉<meta />標簽後頁面會變得很小很小？
- 為什麼很多解析度很大的屏幕寬度其實並不大，屏幕解析度與用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瀏覽器、谷歌瀏覽器，還有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，網上有一篇文章做了比較好的解釋：
https://www.imququ.com/post/devicepixelratio-and-border-width.html
註：文章很多知識引用了《移動webapp開發必備知識》和《什麼是viewport，為啥需要viewport》，鏈接分別是：
http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html
http://www.myexception.cn/mobile/428756.html
還有這篇: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
