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

Question

我尝试使用srcset和尺寸在我的网站上实现自适应图像。在我的电脑上测试时，一切看起来都很棒。与当前页面宽度（页面宽度为500px将检索720px宽图像）相比，下载的图像是次大图像。以下是我正在使用的内容：

<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">）后，媒体查询会按预期响应 - 就像我的设备宽度超过400px（1080px / 4 = 432px）一样。支持这是下面的示例A.这是一个480像素宽的图像，正如预期的那样，它会超过页面边缘约48px。示例B是宽度为1140px的图像，其明显比432px宽视口大得多。示例C是上面的img标记的结果（并且是我的目标）。

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

为什么媒体查询会像我期望的那样响应（就好像我的屏幕只有432像素宽），但响应式图像只关心与真实屏幕分辨率相匹配的图像大小？它必须与2.5设备像素比率有关，但我不知道如何。

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

修改

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

答案/校

正如下面的答案所指出的那样，设备正在做应该正在做什么。为了证明这一点，这是我的设备（432 CSS像素，但1080设备像素）显示480px和1140px图像。虽然480px图像与CSS像素匹配，但与匹配设备像素的1140px图像相比，它非常模糊。因此，该设备最了解，虽然我希望它能够选择较小的图像，但它知道它需要更大的图像（来自 响应式srcset和大小）以正确显示图像。

Answer 1

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

图片显示正确，因为如果您不使用CSS覆盖图片维度，则会使用sizes属性（在您的情况下为"100vw"，即〜"100%"） （如果您将sizes更改为"50vw"，您将获得"50%"宽度。

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

普通媒体查询（min-width，max-width ...）在所谓的布局像素（也是CSS像素）中测量。这些像素是真实物理像素（设备像素）的抽象，以具有令人满意且可靠的像素单元来为视网膜屏幕（有时是非常低分辨率的屏幕）进行布局填充（CSS）。使用物理像素作为布局像素意味着在小而高分辨率的设备上非常非常小的布局对象。在CSS世界中，像素表示布局像素。这是通过设备像素/设备像素比计算的。

然而，在图像的情况下，它是关于您的设备实际拥有多少像素的全部内容。如果屏幕宽度为1000像素，图像显示为100vw，则加载1000像素宽的图像以满足屏幕的全部质量是有意义的。 （=每个物理屏幕像素都会分配一个实际图像像素。）

如果只用360个布局像素测量这1000个物理像素，这就更有意义了。

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