srcset 不支持高 dpi 屏幕

【问题标题】：srcset without high-dpi screen supportsrcset 不支持高 dpi 屏幕
【发布时间】：2019-07-03 17:53:00
【问题描述】：

有一个带有 srcset 属性的图片标签，如下所示：

<img src="..." 
  srcset="small.jpg 300w, large.jpg 900w"
  sizes="300px" />

在正常的 1x dpi 屏幕上，它加载 small.jpg，但在高 DPI 屏幕（例如视网膜）上 - 它加载 large.jpg。

有没有办法让它在高 DPI 屏幕上加载 small.jpg？

【问题讨论】：

【解决方案1】：

这就是srcset 的工作方式，这是故意的。

如果您想阻止浏览器下载您提供的相关图像，因为您的sizes 值表明您的用例不需要支持可变视口宽度，您应该使用不带srcset 的简单src ：

<img src="small.jpg" width="300" />

但这意味着您始终将图像显示为 300px 宽，屏幕密度高于 1dppx 的用户可能会看到低质量的渲染。

您能解释一下为什么要发生这种情况吗？

【讨论】：