在 css 中我们一般使用 px 作为单位，在桌面浏览器中 css 的 1 个像素往往都是对应着电脑屏幕的 1 个物理像素，这可能会造成我们的一个错觉，那就是 css 中的像素就是设备的物理像素。但实际情况却并非如此， css 中的像素只是一个抽象的单位，在不同的设备或不同的环境中， css 中的 1px 所代表的设备物理像素是不同的。

在早先的移动设备中，屏幕像素密度都比较低，如 iphone3 ，它的分辨率为 320 480 ，在 iphone3 上，一个 css 像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从 iphone4 开始，苹果公司便推出了 Retina 屏，分辨率提高了一倍，变成 640 960 ，但屏幕尺寸却没变化，这意味着同样大小的屏幕上，像素却多了一倍，这时，一个 css 像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为 ldpi、mdpi、hdpi、xhdpi 等不同的等级，分辨率也是五花八门，安卓设备上的一个 css 像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起 css 中 px 的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么 css 中 1px 所代表的物理像素也增加一倍，反之把页面缩小一倍， css 中 1px 所代表的物理像素也会减少一倍。

dpr

在移动端浏览器中以及某些桌面浏览器中， window 对象有一个devicePixelRatio 属性，它的官方定义是：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css 中的 px 就可以看作是设备的独立像素，所以通过 devicePixelRatio ，我们可以知道该设备上一个 css 像素代表多少个物理像素。例如，在 Retina 屏的 iphone 上，devicePixelRatio 的值为 2 ，也就是说 1 个 css 像素相当于 2 个物理像素。

参考文章：