了解响应式图像和设备像素比

Question

我正在尝试使用 srcset 和尺寸在我的网站上实现响应式图像。在我的电脑上测试时，一切看起来都很好。与当前页面宽度相比，下载的图像是下一个最大的图像（500 像素的页面宽度将检索 720 像素宽的图像）。这是我正在使用的：

<img src="image-240w.jpg"
    srcset="image-1140w.jpg 1140w,
        image-940w.jpg 940w,
        image-720w.jpg 720w,
        image-480w.jpg 480w,
        image-240w.jpg 240w"
    sizes="(max-width: 1140px) 100vw, 1140px">

在我的手机上是我感到困惑的地方。我有一个 Nexus 5X，屏幕分辨率为 1920x1080，设备像素比为 2.5。将视口元数据添加到我的页面 (<meta name="viewport" content="width=device-width, initial-scale=1">) 后，媒体查询会按预期响应——就好像我的设备宽度刚刚超过 400 像素（1080 像素/4 = 432 像素）一样。支持这一点是下面的示例 A。这是一个 480 像素宽的图像，正如预期的那样，它超出页面边缘约 48 像素。示例 B 是一个 1140 像素宽的图像，它明显比 432 像素宽的视口大得多。示例 C 是上面 img 标记的结果（也是我的目标）。

起初，我很高兴一切正常。但是，当使用我的开发人员工具查看时，我可以看到带有 srcset 的 img 标签实际上下载了 1140px 宽的图像。在我看来，应该选择 480px 宽的图像（仅比 432px 宽的视口大一点）。相反，下载的图像是 1080px 宽屏幕的图像。

为什么媒体查询会像我期望的那样响应（好像我的屏幕只有 432 像素宽），但响应式图像只关心与实际屏幕分辨率匹配的图像大小？它一定与 2.5 设备像素比有关，但我就是不明白。

我的目标是在我的设备上获得 480 像素的图像，而不是最大的图像。我该如何做到这一点？

编辑

或者也许我的愿望不正确，浏览器正在做它应该做的事情。解释为什么，当 480px 宽的图像已经挂在屏幕边缘时，它仍然应该选择 1140px 宽的图像。

答案/证明

正如下面的答案所指出的，设备正在做它应该做的事情。只是为了证明一点，这是我的设备（432 CSS 像素，但 1080 设备像素）显示 480 像素和 1140 像素的图像。虽然 480 像素的图像与 CSS 像素匹配，但与匹配设备像素的 1140 像素图像相比，它非常模糊。所以，设备知道得最好，虽然我希望它选择较小的图像，但它知道它需要更大的图像（来自 响应式 srcset 和尺寸）以正确呈现图像。

Answer 1

答案是：是的，它与设备像素比有关。是的，该设备做得对。

图像显示正确，因为如果您不使用 CSS 覆盖图像尺寸，则使用 sizes 属性（在您的情况下为 "100vw"，即 ~"100%"）（如果您更改 sizes到"50vw" 你会绕过"50%" 宽度）。

关键是像素有不同的概念。

普通媒体查询（最小宽度、最大宽度...）以所谓的布局像素（也称为 CSS 像素）来衡量。这些像素是对真实物理像素（设备像素）的抽象，具有令人满意且可靠的像素单元来为视网膜屏幕（有时是分辨率非常低的屏幕）进行布局（CSS）。使用物理像素作为布局像素意味着在小但高分辨率的设备上非常非常小的布局对象。在 CSS 世界中，像素意味着布局像素。这是按设备像素/设备像素比率计算的。

但是，如果是图像，则与您的设备实际拥有多少像素有关。如果它的屏幕宽度为 1000 像素，并且图像以 100vw 显示，则加载 1000 像素宽度的图像以满足屏幕的完整质量是有意义的。 （= 每个物理屏幕像素都分配了一个真实的图像像素。）

如果这 1000 个物理像素仅在 360 个布局像素中测量，这甚至是有意义的。

另请参阅：A pixel is not a pixel。