logo标签列表

哪些浏览器支持`<img srcset...>`属性？

html
24

<img srcset... 属性 可以根据屏幕分辨率展示不同的图片。

截至2013年1月，哪些浏览器支持这个属性？

考虑到该属性对在智能手机上浏览的用户非常有用，此外，哪些移动浏览器支持这一特性？

2
caniuse.com 是一个非常好的 浏览器兼容性 资源。 - cregox
是的，那是一个很好的资源，但实际情况可能会有所不同。 - Rantiev
我在下面的回答中推荐了https://html5test.com/compare/feature/responsive.srcset.html。我也刚刚看了一下caniuse.com，它有一个漂亮的表格视图。 - Webel IT Australia - upvoter
6个回答
8

2014年2月更新

srcset包含像素密度和视口宽度等多个方面。截至撰写本文时：

  • 当前版本的Safari、Chrome和Firefox均不支持视口宽度
  • Chrome支持像素密度

我在Github仓库上放了一些测试文件和结果，我会尽力保持更新。

2
WebKit于2013年8月12日增加了支持。这意味着它可能会支持Safari 7版本（来自Mavericks），但我不确定移动版Safari是否支持。 - Nick
3
我已更新我的 Github 存储库。它还没有适配 Safari 7。此外，我注意到 Surfin' Safari 只涉及像素密度，而非视口宽度。 - Mike
FYI...另一篇文章，WebKit已经实现了srcset，这是一件好事，由W3C的响应式图片社区小组主席撰写。 - Basil Bourque
4
1
而且（截至今天），Chrome：http://blog.chromium.org/2014/02/chrome-34-responsive-images-and_9316.html - fboes
1

有趣的是，维基百科似乎正在使用类似这样的属性的srcset：

srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/300px-Izokefalizm.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/400px-Izokefalizm.jpg 2x"

我猜他们正在使用一个polyfill来实现这个，但它确实能够正确地显示更大的图片。值得探究一下。
1
是的，这是一个Polyfill，请参见http://www.mediawiki.org/wiki/Manual:$wgResponsiveImages和http://www.mediawiki.org/wiki/HiDPI_display_support。 - leo
你问的是什么-y-fill：http://elroyjetson.org/dev-notes/mobile/implement-responsive-images-with-a-polyfill - Simon_Weaver
1

请查看CanIUse.com获取当前支持情况。截至2015年10月，如果您不太关心IE浏览器，那么您可以在几乎所有浏览器上安全使用它，非常好！

1
但只包括1x和2x的分辨率，不包括w标记。 - Simon_Weaver
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接