srcset属性在移动设备及Chrome开发者工具移动视图下未按预期生效

问题原因 #

你对srcset的基础逻辑理解没有错，出现该现象的核心原因是你忽略了**设备像素比（DPR）**对图片选择逻辑的影响：

• srcset中w后缀标注的是图片的物理像素宽度
• 浏览器选择图片时，会先通过sizes规则计算出图片的逻辑展示宽度，再乘以当前设备的DPR，得到需要的最小物理像素宽度，最终选择大于等于该值的最小规格图片

移动设备和Chrome设备模拟工具默认的DPR普遍为2~3，以DPR=3、视口宽度400px的场景为例：
需要的物理像素宽度 = 400px * 3 = 1200px，你提供的最大图片仅为1120物理像素，因此浏览器会始终选择最大规格的图片。
桌面端普通屏幕DPR大多为1，计算出的物理像素宽度和逻辑宽度一致，因此表现符合你的预期。

验证方法 #

打开Chrome开发者工具的设备工具栏，手动将DPR调整为1后刷新页面，即可看到和桌面端一致的图片选择表现。

解决方案 #

如果你需要严格按照视口宽度选择图片、不考虑DPR的影响，可以改用picture元素绑定媒体查询实现：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
  <source media="(max-width: 400px)" srcset="https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-small.jpg">
  <source media="(max-width: 720px)" srcset="https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg">
  <source media="(max-width: 1120px)" srcset="https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-large.jpg">
  <img 
    src="https://www.bennet.org/blog/responsive-images-busy-people/images/curiosity-medium.jpg"
    alt="Mars Curiosity Rover takes an excellent selfie."
  >
</picture>
</body>
</html>

该写法会严格匹配媒体查询规则，不受设备DPR影响。

内容的提问来源于stack exchange，提问作者Nick Dawes