我正在试图找到一种方法来为iOS8客户端提供高dpi图像,同时还为支持w语法的浏览器提供响应式图像资源.根据W3C标准,应该可以在一个srcset属性中混合使用两种语法:
<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
(来源:http://drafts.htmlwg.org/srcset/w3c-srcset/)
但是,当我在Chrome 38(OS X,没有高dpi)中运行该示例时,在其他情况下支持w语法,浏览器总是加载最大的图像(banner-HD.jpeg),而不管视口大小如何.当我添加
banner.jpeg 1x
到srcset Chrome使用该图像,但仍然忽略100w图像.
在我的情况下,我想指定一个较小版本的图像以及两个资源:
<img src="default.png"
srcset="small.png 480w, small@2x.png 480w 2x, medium.png 1x, medium@2x.png 2x">
这似乎适用于2x iOS8设备,选择medium@2x.png因为它们不支持w语法.但是,无论视口大小如何,Chrome似乎都不关心并加载medium.png.
我在这里做错了什么,或者这是Chrome的srcset实现中的一个已知问题？