Boris Smus的文章《可变像素密度的高DPI图像》对设备像素比有一个更准确的定义:每个CSS像素的设备像素数是一个很好的近似值，但不是全部。

注意，您可以通过window.devicePixelRatio获得设备使用的DPR。

简短的回答

设备像素比是物理像素与逻辑像素的比值。例如，iPhone 4和iPhone 4S报告的设备像素比为2，因为物理线性分辨率是逻辑线性分辨率的两倍。

物理分辨率:960 x 640 逻辑分辨率:480 x 320

公式为:

地点:

物理分辨率是线性的吗

and:

逻辑分辨率是线性的吗

其他设备报告不同的设备像素比，包括非整数。例如，诺基亚Lumia 1020报告的是1.6667，三星Galaxy S4报告的是3，苹果iPhone 6 Plus报告的是2.46。但这在原则上不会改变任何东西，因为你永远不应该为任何特定的设备进行设计。

讨论

CSS的“像素”甚至不被定义为“某个屏幕上的一个图片元素”，而是作为一个非线性的角度测量

当涉及到网页设计时，这有很多含义，比如准备高清图像资源，在不同的设备像素比上仔细应用不同的图像。您不希望强制低端设备下载一个非常高分辨率的图像，而只是在本地将其缩小。您也不希望高端设备将低分辨率图像升级为模糊的用户体验。

如果你被位图图像所困，为了适应许多不同的设备像素比例，你应该使用CSS Media Queries或HTML picture Element为不同的设备组提供不同的资源集。结合一些技巧，如background-size: cover或显式设置background-size为百分比值。

例子

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

这样，每种设备类型只加载正确的映像资源。还要记住，CSS中的px单位总是对逻辑像素进行操作。

矢量图形的一个案例

随着越来越多的设备类型出现，为所有这些设备提供足够的位图资源变得越来越棘手。在CSS中，媒体查询是目前唯一的方式，在HTML5中，图片元素允许你使用不同的来源进行不同的媒体查询，但仍然不是100%的支持，因为大多数web开发人员仍然需要在一段时间内支持IE11。

如果图标、线条艺术、非照片的设计元素需要清晰的图像，那么就需要开始考虑SVG，它可以完美地适应所有分辨率。

Boris Smus的文章《可变像素密度的高DPI图像》对设备像素比有一个更准确的定义:每个CSS像素的设备像素数是一个很好的近似值，但不是全部。

注意，您可以通过window.devicePixelRatio获得设备使用的DPR。

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio 给出每个CSS像素的设备像素数。

这几乎不言自明。该数字描述了“真实”像素(屏幕的物理像素)用于显示一个“虚拟”像素(在CSS中设置的大小)的比例。

设备像素比== CSS像素比

在web开发的世界中，设备像素比(也称为CSS像素比)决定了CSS如何解释设备的屏幕分辨率。

浏览器的CSS通过以下公式计算设备的逻辑(或解释)分辨率:

例如:

苹果iPhone 6s

实际分辨率:750 x 1334 CSS像素比:2 逻辑分辨率:

当查看网页时，CSS会认为设备有一个375x667分辨率的屏幕，媒体查询将会响应，就好像屏幕是375x667。但在屏幕上呈现的元素将是实际375x667屏幕的两倍，因为在物理屏幕上有两倍的物理像素。

其他一些例子:

三星Galaxy S4

实际分辨率:1080 × 1920 CSS像素比:3 逻辑分辨率:

iPhone 5 s

实际分辨率:640 x 1136 CSS像素比:2 逻辑分辨率:

为什么存在设备像素比?

创建CSS像素比的原因是，随着手机屏幕的分辨率越来越高，如果每个设备的CSS像素比仍然为1，那么网页就会渲染得太小而无法看到。

典型的全屏桌面显示器大约是24英寸，分辨率为1920x1080。想象一下，如果显示器缩小到大约5英寸，但分辨率相同。在屏幕上看东西是不可能的，因为它们太小了。但制造商现在一直在推出1920x1080分辨率的手机屏幕。

所以，设备像素比是手机制造商发明的，这样他们就可以继续提高手机屏幕的分辨率、清晰度和质量，而不会让屏幕上的元素太小而无法看到或阅读。

下面这个工具还可以告诉你当前设备的像素密度:

http://bjango.com/articles/min-device-pixel-ratio/

设备像素比与设备像素密度直接相关。

我能找到的最简洁的描述:

DPR的目的是保持CSS像素大小一致，因此 大小一致的字母，符号，图像和其他一切 屏幕，跨各种设备具有不同的物理像素 密度。

来源:screenresolutiontest