1

我正在使用srcset为大型设备上的用户显示动画 GIF，但需要向中小型设备上的用户显示静态 JPG。

当我在 1x 屏幕上调整浏览器窗口的大小时，以下代码效果很好。我遇到的问题是在 iPad 上以纵向模式（768 像素）查看页面时，正在显示动画 GIF。我知道浏览器正在尝试显示更高质量的图像，因为它是 2 倍分辨率，但就我而言，它需要是完全不同的图像。

如果用户的屏幕宽度超过 940 像素，如何将其更改为仅显示 GIF？

<img src="static.jpg" sizes="(max-width: 940px)" srcset="static.jpg 940w, animated.gif 1400w" alt="">
4

1 回答 1

3

这根本不是一项工作srcset-srcset处理除分辨率外都完全相同的多个源。如果您提供不同的图像，请使用<picture>多个<source>元素。

例如，要按照要求准确回答您的问题：

<picture>
  <source media="(min-width: 940px)" srcset="animated.gif">
  <img src="static.jpg">
</picture>

但元问题仍然存在：为什么只将 gif 发送到大屏幕设备？你是在想象大屏幕设备有更多的带宽还是什么？

于 2016-02-19T19:22:10.617 回答