打开chrome浏览器，模拟手机调试，iphone6/7/8 行显示的 375*667, DPR:2如何理解呢？这就需要理解一下几个概念：
设备像素
设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
设备独立像素
(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。
所以说，物理像素和设备独立像素之间存在着一定的对应关系。在web开发中可以理解为css像素。
PPI/DPI
PPI/DPI 是像素密集度，表示屏幕每英寸（对角线）拥有的像素个数，PPI/DPI 的计算方式如下（以 IPhone6 为例）：
计算出的 IPhone6 的 PPI 为：325.16。该结果表示在 IPhone6 上，每英寸有 325.16 个物理像素，四舍五入为 325 个物理像素。
可以发现：这个 PPI 的值近似等于 IPhone6 这个设备的水平物理像素的一半，也即：
750 / 325 = 2
这个由设备水平物理像素和设备 PPI/DPI 计算出来出来的比值就是设备像素比。
CSS 中的像素
CSS 中的像素是一个相对值，不是绝对值，因此1px 的 CSS 像素并不一定等于 1px 的物理像素。
需要注意的是，CSS 中的像素单位是抽象的，只是一种规范，最终的显示是取决于物理设备的。物理设备根据某种规则，决定该采用几个物理像素去显示 1px 的 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 * 375（设备宽度不变），设备像素比为 1 的设备上显示 300px 宽度的 DIV 的效果。既然设备像素比为 1，那么也可以这么理解：上例在 IPhone6 中的显示效果相当于在 667 * 375 的 Chrome 浏览器下的显示效果。
screen.width/height
获取设备独立像素值，也就是css宽/高，iphone6中这个宽高就是375/667, 如需获取分辨率，怎需要在此基础上乘以DPI, 也就是window.devicePixelRatio.
document.documentElement.clientWidth
获取文档css宽度，iphone6在全屏情况下375。
window.devicePixelRatio
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
注意：你可以为这个 window.devicePixelRatio 重新赋值，但并不会对最终的显示造成任何的影响。
window.devicePixelRatio = 10
window.devicePixelRatio // 10
上面重新设置了 window.devicePixelRatio 的值，但不会影响浏览器的显示效果，也就是说，手动设置 window.devicePixelRatio 是没有任何用处的。