window.devicepixelratio是裝置物理畫素和裝置獨立畫素（device-independent pixels，dips）之間的比率。window.devicepixelratio = 物理畫素/ 裝置獨立畫素
上面三個概念中：
裝置物理畫素，其實就是物理解析度，也就是我們常說的手機解析度，如2048*1080就指2k螢幕，橫向有2048個畫素點，縱向有1080個畫素點
css畫素px是乙個相對單位，乙個css畫素可以代表多個物理畫素
先計算ppi，ppi （pixel per inch）：表示每英吋所包含的畫素點數目，數值越高，說明螢幕能以更高密度顯示影象
這個ppi是乙個物理屬性，就是螢幕的畫素密度，螢幕上畫素點越多，螢幕的尺寸越小，ppi當然越大
計算公式：
或
比如已iphone5為例，x是640，y是1136，螢幕尺寸是4，得到的ppi是326
以上計算出ppi是為了得到密度分界，我們可以查表獲得預設縮放比例，即裝置畫素比。上圖中的縮放因子就是裝置畫素比
得到裝置畫素比後我們就知道了我們頁面css樣式中定義的長度1px，對應著實際幾個物理畫素
比如：當裝置畫素比為1:1時，使用1（1×1）個物理畫素顯示1個css畫素；
當裝置畫素比為2:1時，使用4（2×2）個物理畫素顯示1個css畫素；
當裝置畫素比為3:1時，使用9（3×3）個物理畫素顯示1個css畫素。
這時候，如果這張網頁要在螢幕畫素比為2:1的手機上顯示，比如iphone5，如果還想要相同的顯示效果，那麼我們就要將大小變成200px * 200px，此時的實際長寬都是200個畫素點
為什麼呢：
當螢幕畫素比為2:1的時候『，乙個css畫素對應2個物理畫素，所以網頁中的元素的長度佔據的物理畫素變為原來的兩倍，
這時候我們是100px * 100px，佔據螢幕上200 * 200個物理畫素。看起來會變模糊，所以把大小變成200px * 200px，此時的實際長寬都是200個畫素點，它佔據螢幕上200 * 200個物理畫素就剛剛好對應，不會模糊，顯示效果和之前一樣了。
裝置畫素比devicePixelRatio簡單介紹
本文所說devicepixelratio其實指的是window.devicepixelratio,被所有webkit瀏覽器以及opera所支援，隨著顯示器的發展，這個屬性也慢慢登上了前端技術的舞台。本文內容大部分屬於翻譯性質內容，因此，會不那麼通俗易懂。不過，你是做手機開發的，或是有意向的，本文的內...
CSS畫素 裝置獨立畫素 裝置畫素之間關係
css畫素 裝置獨立畫素 裝置畫素，三者聯絡緊密又有很大的區別，而我們主要是在做移動端開發的時候需要更多地用到這些概念，那他們分別是指什麼呢？css畫素 css pixel 適用於web程式設計，指的是我們在樣式 中使用到的邏輯畫素，是乙個抽象概念，實際並不存在 裝置獨立畫素 device inde...
裝置畫素，解析度 ，裝置獨立畫素，CSS畫素
以為為個人理解 畫素 畫素就是組成影象的最基本單元，可以理解為小點。不知道大家有沒有這樣的情況，就是拿放大鏡看顯示屏或電視的時候可以看到乙個乙個的小方框，影象 是由這樣的小點組成的，也就是畫素。裝置畫素 就是裝置的畫素。比如手機畫素，相機畫素，顯示屏畫素等。解析度 通俗講就是分辨影象的程度。畫素越高...