Question

我正在尝试找到一种方法来为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实现中的一个已知问题？

Answer 1

不要看其他浏览器做什么。 Chrome是唯一正确执行此操作的人。（和FF 38 +）
不要看这个草案。它不会也不会实施。这是正确的：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" />

浏览器使用/解析了为不同候选者的w描述符混合x，但是无效，在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）

Answer 2

你想做什么，可以用图片标签来实现：

<picture>
  <source srcset="http://placehold.it/1400x600/e8117f/fff 1x, http://placehold.it/1400x600/e8117f/fff 2x" 
          media="(min-width: 1100px)" />
  <source srcset="http://placehold.it/700x300 1x, http://placehold.it/1400x600 2x" 
          media="(min-width: 720px)" />
  <source srcset="http://placehold.it/500x600/11e87f/fff 1x, http://placehold.it/1000x1200/11e87f/fff 2x" 
          media="(min-width: 450px)" />
  <img src="http://placehold.it/500x600/eee/ddd" 
       alt="image with artdirection" />
</picture>

HTML5 srcset：混合x和w语法

2 个答案: