<img srcset> 在移动设备上没有选择正确的尺寸答案

【问题标题】：<img srcset> does not choose correct size on mobile<img srcset> 在移动设备上没有选择正确的尺寸
【发布时间】：2019-05-16 17:36:08
【问题描述】：

示例<img srcset> 的大小点为 300w、600w、1200w、2400w。移动设备（在devtools和android（moto g3）上的实际chrome中）总是使用1200w（即使移动窗口宽度要小得多并且应该使用600w）——我知道chrome对较大图像和所有测试的缓存行为是在禁用缓存的情况下完成的。

提供了显示<img srcset> 的损坏行为的示例代码，以及使用<picture> 的实现，它完全符合srcset 的预期行为。

https://codepen.io/MiDri/pen/OYmReg

<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>

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

【问题讨论】：

链接到你的浏览器缓存，看this answer
不是的，我在帖子中特别提到过——不过我想通了。

标签： html srcset

【解决方案1】：

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

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

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

希望这对某人有所帮助。

【讨论】：