Srcset谷歌Chrome 34无法正常工作

Question

使用polyfill的attributte“srcset”，直到chrome 33在版本34中不再有效。正如您在此链接http://jimbobsquarepants.github.io/srcset-polyfill/中看到的，如果使用chrome 34访问，则显示的图像是移动一个，因为chrome没有读取srcset，但是如果你在另一个浏览器中打开它将显示桌面图像。任何想法为什么会发生这种情况？

Answer 1

这是因为polyfill具有srcset属性的特征检测：

var srcsetSupported = "srcset" in document.createElement("img");

在Chrom（e | ium）34中，此测试产生“true”，但实际上似乎不支持srcset属性。因此，本机实现和polyfill都不处理该属性。

修改 问题是Chrome 34支持srcset属性，但仅支持部分：仅根据设备像素比（x设置）选择src，但忽略视口（w和h设置）。

编辑2： 更多的研究和询问让我想到了这个：

srcset属性有两种规格。

• first one包括定义用于图像的最大视口宽度和高度的可能性。
• 第二个（找不到好的链接）仅允许定义使用图像的最大设备像素比。要根据视口宽度切换图像，将使用＆lt; picture＆gt; -tag，其中＆lt; source＆gt; -elements允许完整的媒体查询指定何时使用哪个。

Chromium实现了srcset属性的第二个版本，但还没有实现图片标记。

以下是对此的一些讨论（感谢Mat Marquis指出那些）：

• Mozilla
• Blink (Chrome)

<强>变通方法

1. 使用支持＆lt; picture＆gt; -tag的polyfill和有限的srcset（我不知道）。这可能会更具有前瞻性（但可能需要不时调整，标准尚未稳定）。
2. 关闭当前polyfill中的功能检测并始终使用它。这可能会在将来某个时候破裂。