我正在试图找到一种方法来为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实现中的一个已知问题？
解决方法
>不要看其他浏览器做什么. Chrome是唯一正确执行此操作的人. (和FF 38)
>不要看这个草案.它不会也不会实施.这是正确的： https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset
>不要看这个草案.它不会也不会实施.这是正确的： https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset
在一个描述符中将x与w混合是无效的,浏览器将删除这些候选项,因为w描述符总是计算到x描述符中：
<!-- invalid --> <img srcset="a.jpg 1x 300w,b.jpg 2x 600w" />
浏览器使用/解析x与w描述符混合用于不同的候选者,但是无效并且在99％的情况下没有意义：
<!-- makes no sense: --> <img srcset="300.jpg 1x,600.jpg 600w" sizes="100vw" /> <!-- would make sense,because sizes is static in layoutpixel defined (i.e: 600 / 300 = 2x): --> <img srcset="300.jpg 1x,600.jpg 600w" sizes="300px" />
这意味着如果您使用w描述符,您自动也优化视网膜,您不需要使用额外的x描述符. (即：480w 2x = 960w)
另外,在大多数使用w描述符的情况下,你的默认/后备图像也应该在srcset中定义：
<img src="small.png"
srcset="small.png 480w,mediumg.png 640w,large.png 960w"
sizes="100vw" />
>尝试respimage polyfill(dilettantish试图宣传我的polyfill)