javascript - 如何检测浏览器对 "picture"元素的支持

Question

作为更新我的网站以使其更适合移动设备的一部分，我需要根据屏幕/浏览器大小提供不同的图像。我遇到过使用“图片”元素的情况，该元素在受支持时效果很好。目前的问题是不是所有地方都支持它。我想检测浏览器是否支持“图片”元素，以便我可以回退到不同的方法。

如何检测浏览器是否支持“图片”元素？

因为这是我目前唯一需要的检查类型，所以我想尽可能避免引入库(例如 Modernizr)。

Answer 1

确定是否支持 picture 其实很简单:

var pic = !!window.HTMLPictureElement;
console.log("picture supported: " + pic);

如果您的浏览器需要解决方法，这将打印 false，如果它支持 picture，则打印 true。显然，这并不一定意味着对 picture 的支持也是完整和出色的(截至 2016 年初，许多浏览器可能仍在进行中)。

不管 picture 元素是否内置了回退，我相信有正当理由想知道浏览器是否支持 picture 元素。

例如，您可能想提供自己的解决方法，而不是使用类似 picturefill.js 的大型工具polyfill.