定義
window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
理解
移動端的設備多種多樣，不同的設備又有不同的分辨率，低一點的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 1080，甚至還有更高的 4k 屏等。
我們在開發移動端頁面時，將視口（viewport）設置為設備寬度（device-width）后，同一份頁面在這些不同的設備上會出現相同的表現。
為什么這些設備擁有不同的分辨率，而在渲染頁面時表現都一樣呢？其實這是由設備像素比造成的。
設備像素比是怎么發揮作用的呢？要理解這個問題，需要三塊預備知識：
設備獨立像素
DPI/PPI
CSS 中的像素
設備獨立像素
設備的獨立像素是和設備的分辨率相關聯的，比如 IPhone6 的分辨率為 1334 * 750，那么表示該手機的屏幕上有 1366 * 750 個物理像素，而 Galaxy S5 的屏幕上有 1280*720 個像素。
PPI/DPI
表示每英寸所包含的像素點數目，數值越高，說明屏幕能以更高密度顯示圖像
計算公式——
以 IPhone6 為例，可以計算出的 IPhone6 的 PPI 為：325.16。該結果表示在 IPhone6 上，每英寸有 325.16 個物理像素，四舍五入為 325 個物理像素。
可以發現：這個 PPI 的值近似等於 IPhone6 這個設備的水平物理像素的一半，也即：
750 / 325 = 2
1
這個由設備水平物理像素和設備 PPI/DPI 計算出來出來的比值就是設備像素比。
CSS 中的像素
CSS 中的像素是一個相對值，不是絕對值，因此1px 的 CSS 像素並不一定等於 1px 的物理像素。
需要注意的是，CSS 中的像素單位是抽象的，只是一種規范，最終的顯示是取決於物理設備的。物理設備根據某種規則，決定該采用幾個物理像素去顯示 1px 的 CSS 像素，這個規則就是設備像素比。
設備像素比
當設備像素比為1:1時，使用1（1×1）個設備像素顯示1個CSS像素；
當設備像素比為2:1時，使用4（2×2）個設備像素顯示1個CSS像素；
當設備像素比為3:1時，使用9（3×3）個設備像素顯示1個CSS像素。
如下圖所示：
前面已經說到過，設備像素比等於設備的水平物理像素和設備 PPI 的比值。設備像素比的意義就是決定了用多少個物理像素去顯示 1px 的 CSS 像素。比如在 IPhone6 中，設備像素比為 2，那么在 IPhone6 上就會使用 2*2 = 4 個物理像素去顯示 1px 的 CSS 像素。
因此，如果我們給一個 DIV 元素設置 300px * 300px 的樣式，那么其在 IPhone6 上將會占用 600 * 600 個物理像素。這就是為什么明明 IPhone6 的分辨率為 1334 * 750（物理像素），而將 DIV 元素的寬度設置成 300px 后，其幾乎占滿了水平屏幕的原因。
上例在 IPhone 中的渲染效果也可以理解為：在分辨率為 667 * 325（設備寬度不變），設備像素比為 1 的設備上顯示 300px 寬度的 DIV 的效果。既然設備像素比為 1，那么也可以這么理解：上例在 IPhone6 中的顯示效果相當於在 667 * 325 的 Chrome 瀏覽器下的顯示效果。
Galaxy S5 的設備像素比為 3，因此在 Galaxy S5 中的顯示效果可以理解為在 660 * 360 的 Chrome 瀏覽器下的顯示效果。
這也解釋了為什么不同分辨率的設備，對於 300px 寬度的 DIV 展示效果基本一致的情況。
window.devicePixelRatio
window 對象有個 devicePixelRatio 屬性，其中也保存了設備像素比的值，因此我們不必經過上面的公式計算，就可以直接獲取到設備像素比的值。
注意：你可以為這個 window.devicePixelRatio 重新賦值，但並不會對最終的顯示造成任何的影響
window.devicePixelRatio = 10
window.devicePixelRatio // 10
1
2
3
上面重新設置了 window.devicePixelRatio 的值，但不會影響瀏覽器的顯示效果，也就是說，手動設置 window.devicePixelRatio 是沒有任何用處的。
注意
我們需要記住一點：1px 的 CSS 像素並不一定等於 1px 的物理像素，不同的設備會根據其對應設備像素比決定使用多少個物理像素顯示 1px 的 CSS 像素。
另外，在移動端不建議使用 px 作為布局單位，而是應該使用 rem 或者百分比作為布局單位。