Html 无法使srcset跨设备工作

我有一个主标题图像：

<img class="hero" src="/assets/images/Food-Spread-500x167.jpg" alt="banner image" sizes="(min-width: 992px) 80vw, 100vw"
srcset="/assets/images/Food-Spread-500x167.jpg 500w,
        /assets/images/Food-Spread-768x256.jpg 768w,
        /assets/images/Food-Spread-992x331.jpg 992w,
        /assets/images/Food-Spread-1200x400.jpg 1200w">

我面临的困难有两方面：

您应该将哪个大小设置为src回退？最大的还是最小的？IE根本不支持srcset，所以你会留下一个很小的图像作为你的标题！！Safari（mac）也在与之抗争

因为没有办法说‘n’vw 2x，你如何让它在iphone上工作？（照原样 视网膜它显然认为它是它的两倍大，并拉一个 比所需图像大得多）。有什么可以做的吗

先谢谢你

你可以挑你喜欢的任何一个！您必须在最适合传统桌面浏览器和最适合传统移动浏览器之间进行权衡

这里的问题是Safari支持带有

x

描述符的

srcset

，但不支持

w

或

大小

。发生的情况是，

size

属性被忽略，然后它要么选择

srcset

中的第一个候选项作为“1x”，要么忽略

srcset

中的所有候选项（取决于Safari的版本），并改为使用

src

。因此，您可能会将500x167图像渲染为500 CSS px宽，这会溢出（320 CSS px宽）视口

您可以做两件事来解决此问题（如果愿意，您可以同时做这两件事）：

• 使用picturefill，它将添加对

  w

  和

  size

  的支持，并执行内部大小调整
• 使用CSS设置宽度：

  .hero{width:100%}
  @媒体（最小宽度：992px）{.hero{width:80%}

---

我不明白你在第（2）项中的问题。你想让iPhone下载一张“2x”的图像，对吗？它应该选择一张更大的图像，但它应该再缩小一次。哪个iOS版本？你在用picturefill吗？哪个版本？嗯，Iphone是640px…屏幕的实际像素宽度是640px。浏览器以320px的速度呈现网页，那么为什么不将imgae设置为320px呢？

srcset

属性只是选择最适合的图像，它不适合你。由于您的屏幕是640px，它会将壁橱图像抓取到640px，因此您的工作是通过css将其缩小以适合浏览器320px。此外，由于一些早期的

srcset

实现在不理解描述符时选择

srcset

中的第一个候选对象，我建议将您在

src

中使用的候选者放在

srcset

的第一位，至少如果您选择不使用picturefill，这样他们就可以得到“正确”的回退图像。