设备像素比

设备像素比（devicePixelRatio），简称 dpr，是指设备物理像素和设备独立像素之间的比率，即： dpr = 物理像素 / 设备独立像素 在浏览器中可以通过 window.devicePixelRatio 获取。

物理像素 是一个物理概念，显示屏是由一个个物理像素点组成的，屏幕出产后，它上面的物理像素点就固定不变了。我们常说的分辨率指的就是物理像素，比如 Phone 5 的分辨率 640 x 1136，表示横向有 640 个物理像素，竖向有 1136 个物理像素。

设备独立像素 设备独立像素是一个虚拟的单位，独立于设备。是用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素。一种形象的说法，可以理解为在 css 中的 px。

设备独立像素 = 逻辑像素 = CSS 像素

比如 Phone 5 的 css 像素 320 x 568

设备像素比的作用

得到设备像素比后我们就知道了我们页面 CSS 样式中定义的长度 1px，对应着实际几个物理像素

举个例子，iphone3 和 iphone4 的尺寸都是 3.5 寸，但 iphone3 的分辨率是 320x480，iphone4 的分辨率是 640x960，这也就是意味着同样长度的屏幕，iphone3 有 320 个物理像素，iphone4 有 640 个物理像素。

如果我们按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位（设备独立像素）。

我们统一 iphone3 和 iphone4 都是 320 个虚拟像素，只是在 iphone3 上，最终 1 个虚拟像素换算成 1 个物理像素，在 iphone4 中，1 个虚拟像素最终换算成 2 个物理像素。

参考

苹果设备尺寸：https://developer.apple.com/design/human-interface-guidelines/layout