理解响应式图片和设备像素比

Question

我正在尝试使用srcset和sizes在我的网站上实现响应式图片。在我的电脑上测试时，一切看起来都很好，并且可以正常工作。下载的图像是与当前页面宽度相比的下一个最大的图像（页面宽度为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">

在我的手机上我感到困惑。我使用的是分辨率为1920x1080，设备像素比为2.5的Nexus 5X。当在我的页面中添加了视口元标记 (<meta name="viewport" content="width=device-width, initial-scale=1">) 后，媒体查询会如预期地响应--就好像我的设备宽度略大于400px (1080px/4 = 432px)。为了支持这一点，下面是示例A。它是一个480像素宽的图像，正如预期的那样，超出页面边缘约48像素。示例B是一个1140像素宽的图像，显然比432像素宽的视口要大得多。示例C是来自上面的img标记的结果（也是我所追求的）。

起初，我很高兴一切都正常。然而，在使用开发者工具查看时，我发现带有srcset的标签实际上下载了1140像素宽的图片。在我看来，应该选择480像素宽的图片（略大于432像素宽的视口）。但下载的图片是1080像素宽的。

为什么媒体查询的响应与我预期的相同（好像我的屏幕只有432像素宽），但响应式图像只关心与真实屏幕分辨率匹配的图像大小？这一定与2.5设备像素比有关，但我不知道具体原因。

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

编辑

或许我的愿望是错误的，浏览器正在按照正确的方式进行。请解释一下，当一个480像素宽的图像已经悬挂在屏幕边缘时，为什么仍然要选择1140像素宽的图像。

回答/证明

如下答案所指出的，设备正在执行它应该执行的操作。为了证明这一点，这是我的设备（432个CSS像素但1080个设备像素）显示480px和1140px图像。尽管480px图像匹配CSS像素，但与匹配设备像素的1140px图像相比，它非常模糊。因此，设备最懂得选择，尽管我希望它选择较小的图像，但它知道需要更大的图像（来自响应式srcset和大小）才能正确呈现图像。

- justinvoelker

Answer 1

答案是：是的，它与设备像素比有关。而且，设备做得很好。

如果您不使用CSS覆盖图像尺寸，则会使用“sizes”属性（在您的情况下为“100vw”，约为“100％”），因此图像会正确显示。（如果您将“sizes”更改为“50vw”，则宽度约为“50％”）。

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

普通媒体查询（min-width、max-width等）以所谓的布局像素（也称CSS像素）进行测量。这些像素是真实物理像素（设备像素）的抽象，以获得令人满意和可靠的像素单位来进行视网膜屏幕（以及有时是非常低分辨率的屏幕）的布局处理（CSS）。在CSS世界中，像素表示布局像素。这是通过设备像素/设备像素比计算的。

然而，在图像的情况下，一切都取决于您的设备实际拥有多少像素。如果它具有1000像素的屏幕宽度，并且图像以100vw显示，则加载1000像素宽度的图像是有意义的，以满足屏幕的完整质量。（每个物理屏幕像素分配一个真实的图像像素。）

即使这1000个物理像素只测量为360个布局像素，这也是有意义的。

另请参见：像素不是像素。

- alexander farkas