关于 devicePixelRatio
定义
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 或者百分比作为布局单位。
