Html <；img srcset>；在手机上选择的尺寸不正确

示例

的尺寸点为300w、600w、1200w、2400w。移动设备（在devtools和android上的chrome（moto g3））总是使用1200w（尽管移动窗口的宽度要小得多，应该使用600w）——我知道chrome在较大图像上的缓存行为，所有测试都是在禁用缓存的情况下进行的

所提供的示例代码显示了

的中断行为，以及使用

的一个实现，该实现完全实现了srcset所期望的行为

---

有人知道为什么srcset会这样吗？

弄明白了！它与DPR（设备像素比率）以及srcset候选说明符如何忽略它有关。。。当您使用媒体查询时，会考虑DPR，因为它们在技术上是css规范的一部分

示例：iPhone6X的屏幕分辨率为1920 x 1080，但由于它的DPR为3.0，因此呈现给CSS（以及媒体查询）和JS的是414x736

这意味着如果iPhone6X用户以纵向方式访问您的页面，并且您的srcset图像为300w、600w、1200w、2400w；浏览器将选择1200w图像

---

希望这有助于某人。

找到了答案！它与DPR（设备像素比率）以及srcset候选说明符如何忽略它有关。。。当您使用媒体查询时，会考虑DPR，因为它们在技术上是css规范的一部分

示例：iPhone6X的屏幕分辨率为1920 x 1080，但由于它的DPR为3.0，因此呈现给CSS（以及媒体查询）和JS的是414x736

这意味着如果iPhone6X用户以纵向方式访问您的页面，并且您的srcset图像为300w、600w、1200w、2400w；浏览器将选择1200w图像

---

希望这对其他人有所帮助。

它链接到你的浏览器缓存，看它不是，我在帖子中特别提到了--我发现了。它链接到你的浏览器缓存，看它不是，我在帖子中特别提到--我发现了。

<img src='/1x1.gif' srcset='https://dummyimage.com/300x200/0000ff/fff 300w, https://dummyimage.com/600x400/000/fff 600w, https://dummyimage.com/1200x800/ff0000/000 1200w, https://dummyimage.com/2400x1600/00ff00/000 2400w'>

<picture>
    <source srcset='https://dummyimage.com/300x200/0000ff/fff'   media='(max-width:300px)'>
    <source srcset='https://dummyimage.com/600x400/000000/fff'   media='(max-width:600px)'>
    <source srcset='https://dummyimage.com/1200x800/ff0000/000'  media='(max-width:1200px)'>
    <source srcset='https://dummyimage.com/2400x1600/00ff00/000' media='(max-width:2400px)'>
    <img src='/1x1.gif'>
</picture>