html - devicePixelRatio 和 dppx 有什么不同？

Question

我对 devicePixelRatio 和 dppx 做了一些研究:

deicePixelRatio:返回当前显示设备上一个物理像素的(垂直)尺寸与一个 CSS 像素的尺寸之比。

dppx:每‘px’单位的点数。

我认为它们只是同一件事，但我不确定，对吗？

Answer 1

在网络开发领域，设备像素比(也称为 CSS 像素比，也称为 dppx)决定了 CSS 如何解释设备的屏幕分辨率。

CSS 通过以下公式解释设备的分辨率:device_resolution/css_pixel_ratio。例如:

三星盖乐世 SIII

实际分辨率:720 x 1280CSS 像素比例:2解析分辨率:(720/2) x (1280/2) = 360 x 640

当查看网页时，CSS 会认为设备有一个 360x640 分辨率的屏幕，媒体查询会像屏幕是 360x640 一样响应。但屏幕上渲染的元素将是实际 360x640 屏幕的两倍。

其他一些例子:

三星 Galaxy S4

实际分辨率:1080 x 1920CSS 像素比:3解析分辨率:(1080/3) x (1920/3) = 360 x 640

iPhone 5s

实际分辨率:640 x 1136CSS 像素比例:2解析分辨率:(640/2) x (1136/2) = 320 x 568

之所以创建 CSS 像素比，是因为随着手机屏幕的分辨率越来越高，如果每个设备的 CSS 像素比仍然为 1，那么网页将呈现得太小而无法看到。典型的全屏桌面显示器是 1920x1080 的 24"显示器。想象一下，如果该显示器缩小到 < 5"但具有相同的分辨率。在屏幕上查看东西是不可能的，因为它们太小了。

这里有一个工具可以告诉您当前设备的像素密度:

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

这是一个可搜索的设备像素比列表(如果您有要添加到此列表的设备，他们会通过 GitHub 接受拉取请求)

http://dpi.lv/