Question

示例<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的行为是这样的吗？

Answer 1

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

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

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

希望这对某人有帮助。

<img srcset=""/>在移动设备上没有选择正确的尺寸

1 个答案: