本文所說devicepixelratio其實指的是window.devicepixelratio, 被所有webkit瀏覽器以及opera所支援，隨著顯示器的發展，這個屬性也慢慢登上了前端技術的舞台。
本文內容大部分屬於翻譯性質內容，因此，會不那麼通俗易懂。不過，你是做手機開發的，或是有意向的，本文的內容如果細細讀來，還是有些收穫的。
window.devicepixelratio是裝置上物理畫素和裝置獨立畫素(device-independent pixels (dips))的比例。
公式表示就是：window.devicepixelratio = 物理畫素 / dips
dip或dp,（device independent pixels，裝置獨立畫素）與螢幕密度有關。dip可以用來輔助區分視網膜裝置還是非視網膜裝置。
所有非視網膜螢幕的iphone在垂直的時候，寬度為320物理畫素。當你使用的時候，會設定視窗布局寬度（不同於視覺區域寬度，不放大顯示情況下，兩者大小一致，見下圖）為320px, 於是，頁面很自然地覆蓋在螢幕上。
這樣，非視網膜螢幕的iphone上，螢幕物理畫素320畫素，獨立畫素也是320畫素，因此，window.devicepixelratio等於1.
而對於視網膜螢幕的iphone，如iphone4s, 縱向顯示的時候，螢幕物理畫素640畫素。同樣，當使用者設定的時候，其視區寬度並不是640畫素，而是320畫素，這是為了有更好的閱讀體驗 – 更合適的文字大小。
這樣，在視網膜螢幕的iphone上，螢幕物理畫素640畫素，獨立畫素還是320畫素，因此，window.devicepixelratio等於2.
真是喜憂參半。好的是safari, android webkit, chrome 22+(android), opera mobile, blackberry webkit, qq, palm webkit, 及dolfin都能正確實現該屬性。
當然，大部分這些瀏覽器仍然執行在devicepixelratio值應該為1的系統上，當它們移動到視網膜類似裝置時候，可能就會遇到問題。
兩個注意事項：
meego webkitmeta viewport應用時改變值的做法是大錯特錯的。裝置畫素比應該是不變的，不僅物理畫素值，裝置獨立畫素也是如此。
二是，一些瀏覽器習慣在meta viewport應用時改變各種東西（三星的dolfin就是代表），這完全就是在瞎搞。唯一的變化應該是布局檢視的尺寸。如果瀏覽器變了其他什麼都是，那都是很挫的。
裝置畫素比（devicePixelRatio）
window.devicepixelratio是裝置物理畫素和裝置獨立畫素 device independent pixels，dips 之間的比率。window.devicepixelratio 物理畫素 裝置獨立畫素 上面三個概念中 裝置物理畫素，其實就是物理解析度，也就是我們常說的手機解析度，...
CSS畫素 裝置獨立畫素 裝置畫素之間關係
css畫素 裝置獨立畫素 裝置畫素，三者聯絡緊密又有很大的區別，而我們主要是在做移動端開發的時候需要更多地用到這些概念，那他們分別是指什麼呢？css畫素 css pixel 適用於web程式設計，指的是我們在樣式 中使用到的邏輯畫素，是乙個抽象概念，實際並不存在 裝置獨立畫素 device inde...
裝置畫素，解析度 ，裝置獨立畫素，CSS畫素
以為為個人理解 畫素 畫素就是組成影象的最基本單元，可以理解為小點。不知道大家有沒有這樣的情況，就是拿放大鏡看顯示屏或電視的時候可以看到乙個乙個的小方框，影象 是由這樣的小點組成的，也就是畫素。裝置畫素 就是裝置的畫素。比如手機畫素，相機畫素，顯示屏畫素等。解析度 通俗講就是分辨影象的程度。畫素越高...