Srcset 属性在 Chrome 开发工具的移动设备和移动设备视图中无法正常工作答案

【问题标题】：Srcset attribute not working as expected on mobile and in mobile device view in Chrome dev toolsSrcset 属性在 Chrome 开发工具的移动设备和移动设备视图中无法正常工作
【发布时间】：2021-10-18 15:58:07
【问题描述】：

鉴于以下情况：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<img
  src="https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg"
  alt="Mars Curiosity Rover takes an excellent selfie."
  srcset="
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-large.jpg 1120w,
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg 720w,
    https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-small.jpg 400w"
  sizes="(max-width: 400px) 400px, (max-width: 720px) 720px, (max-width: 1120px) 1120px"
>
</body>
</html>

当在视口宽度分别为 400 像素、720 像素和 1120 像素的设备上查看时，我希望浏览器选择的图像是小、中然后大。这确实是在桌面浏览器中测试时的行为（拖动窗口，刷新页面），但是在使用真正的移动设备（iOS 14+）查看页面时并非如此。我还使用设备工具栏中的 Chrome DevTools 对此进行了测试。相反，在所有情况下都会加载最大的图像。我检查了控制台中的视口宽度，如下图所示。

在移动设备上查看和使用 Chrome DevTools 设备工具栏时的图像。

在桌面上的 Chrome 中查看时的图像，只需调整窗口大小。

我对@987654326@的理解错了吗？会不会是其他地方有问题？

【问题讨论】：

标签： html srcset

【解决方案1】：

您需要警惕像素密度比。 Iphone 的视网膜显示屏具有 2 倍像素密度比（因此 1200 像素的图像用于 600 像素的宽度）。

结帐How to use srcset and sizes for responsive images

【讨论】：

感谢您的帮助，我现在已经到了某个地方。似乎在sizes 属性中使用媒体查询时，媒体查询指的是 CSS 像素，但图像槽宽度指的是设备像素。例如。 sizes="(max-width: 640px) 640px..." 意味着在 1x 设备上查找 w 属性为 640px 的 img，但在 3x 设备上查找 w 属性为 1,920 的图像。在我的情况下，这只会加载最大的图像（1120w）。对吗？