設備像素比（devicePixelRatio,dpr）
定義
window.devicePixelRatio是設備物理像素和設備獨立像素（device-independent pixels，dips）之間的比率。window.devicePixelRatio = 物理像素/ 設備獨立像素
- 設備物理像素：
是一個物理概念，比如設備的分辨率，Phone 5的分辨率640 x 1136px。 - 設備獨立像素dips ：
與設備無關的邏輯像素，代表可以通過程序控制使用的虛擬像素，是一個總體概念，包括了CSS像素，所以前端把它當做CSS邏輯像素理解(參考理解https://www.zhihu.com/question/40506180) - CSS像素：
是Web編程的概念，指的是CSS中使用的邏輯像素。px是一個相對單位，相對的是設備物理像素。
比如iPhone 5使用的是Retina屏幕，使用2px x 2px的設備物理像素，代表 1px x 1px 的 CSS像素，所以設備物理像素為640 x 1136px，而CSS邏輯像素數為320 x 568px。
上面三個概念中：
設備物理像素，其實就是物理分辨率，也就是我們常說的手機分辨率，如2048*1080就指2k屏幕，橫向有2048個像素點，縱向有1080個像素點
CSS像素px是一個相對單位，一個CSS像素可以代表多個物理像素
計算設備像素比
先計算PPI，ppi （pixel per inch）：表示每英寸所包含的像素點數目，數值越高，說明屏幕能以更高密度顯示圖像
這個PPI是一個物理屬性，就是屏幕的像素密度，屏幕上像素點越多，屏幕的尺寸越小，ppi當然越大
計算公式：
或 
比如已iphone5為例，X是640，Y是1136，屏幕尺寸是4，得到的PPI是326
PPI的作用：
以上計算出ppi是為了得到密度分界，我們可以查表獲得默認縮放比例，即設備像素比。上圖中的縮放因子就是設備像素比
ppi在120-160之間的手機被歸為低密度手機，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個高大上的名字——Retina）。
設備像素比作用：
得到設備像素比后我們就知道了我們頁面CSS樣式中定義的長度1px，對應着實際幾個物理像素
比如：
當設備像素比為1:1時，使用1（1×1）個物理像素顯示1個CSS像素；
當設備像素比為2:1時，使用4（2×2）個物理像素顯示1個CSS像素；
當設備像素比為3:1時，使用9（3×3）個物理像素顯示1個CSS像素。
對前端的影響
由此衍生出一個問題：當我們在屏幕像素比為1:1的時候，給頁面插入了一個100px * 100px 的圖片，此時圖片的實際長寬都是100個像素點，占據屏幕上100 * 100個物理像素
這時候，如果這張網頁要在屏幕像素比為2:1的手機上顯示，比如iphone5，如果還想要相同的顯示效果，那么我們就要將圖片大小變成200px * 200px，此時圖片的實際長寬都是200個像素點
為什么呢：
當屏幕像素比為2:1的時候‘，一個css像素對應2個物理像素，所以網頁中的元素的長度占據的物理像素變為原來的兩倍，
這時候我們圖片是100px * 100px，占據屏幕上200 * 200個物理像素。圖片看起來會變模糊，所以把圖片大小變成200px * 200px，此時圖片的實際長寬都是200個像素點，它占據屏幕上200 * 200個物理像素就剛剛好對應，不會模糊，顯示效果和之前一樣了。