1。基础知识
设备像素比
设备像素比是每个 CSS 像素的设备像素数，与：
- 设备的像素密度（每英寸的物理像素数）
- 浏览器的缩放级别
因此，更大的像素密度和/或更高的缩放级别会导致更高的设备像素比。
srcset 属性 & x 描述符
在<img> 标记上，srcset 属性中的x 描述符用于定义设备像素比。所以在：
<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
- 对于 1 的设备像素比，将使用图像 image-1x.jpg。
- 对于 2 的设备像素比，将使用图像 image-2x.jpg。
- 对于 3 的设备像素比，将使用图像 image-3x.jpg。
- 对于后备，将使用
src 属性 (image.jpg)。
srcset 属性 & w 描述符
如果您想在更大或更小的视口上显示不同的图像，srcset 中的 w 描述符和一个新属性 (sizes) 将发挥作用：
<img src="image.jpg" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
这里提到第一张图片的宽度是200px，第二张图片是400px，第三张图片是600px。此外，如果用户的屏幕为150 CSS pixels 宽，则就x 描述符而言，这等同于以下内容：
<img src="image.jpg" srcset="image-1x.jpg 1.33x, image-2x.jpg 2.67x, image-3x.jpg 4x">
sizes属性
您想要在不同屏幕尺寸上显示不同尺寸图像（不同高度、宽度）的实际实现是通过使用sizes 属性以及srcset 属性的w 描述符来完成的。
<img src="image.jpg" sizes="50vw" srcset="image-1x.jpg 200w, image-2x.jpg 400w, image-3x.jpg 600w">
如果浏览器宽度为500 CSS pixels，则图像将显示为250px 宽（因为50vw）。现在，这相当于指定：
<img src="image.jpg" srcset="image-1x.jpg 0.8x, image-2x.jpg 1.6x, image-3x.jpg 2.4x">
因此，对于1.5x 显示，浏览器将下载image-2x.jpg，因为它提供了1.6x 的设备像素比（最适合@987654352 @显示）。
2。回答您的问题
你提到你模拟了一个 480px CSS 宽度的屏幕。
因为您已经将sizes 设置为100vw，这相当于指定：
<img src="boat-2400.jpg" srcset="
boat-480.jpg 1x,
boat-900.jpg 1.88x,
boat-1800.jpg 3.75x,
boat-2400.jpg 5x">
您有可能会显示3x，因此浏览器会下载boat-1800.jpg 文件。
问题
奇怪的是，当我在 iOS 上的 Chrome 上测试时，浏览器实际上下载了boat-2400.jpg，这更令人担忧。
这可能是由于您的 iOS 设备的设备像素比较高，可能接近 5。
我错过了什么吗？
我不这么认为。
我想我不需要 size 属性，因为我在所有视图中都将图像设置为 100vw
sizes 的默认值为100vw。但是，如果您想使用 w 描述符并希望为您的 sizes 提供除 100vw 之外的其他内容，则需要 sizes 属性。