作为更新我的网站以使其更加适合移动设备的一部分，我需要根据屏幕/浏览器大小提供不同的图像。 我遇到过使用“图片”元素，它在受支持时效果很好。目前的问题是它并非在所有地方都受支持。 我想检测浏览器是否支持“图片”元素，以便我可以回退到不同的方法。
如何检测浏览器是否支持“图片”元素？
由于这是我目前需要的唯一检查类型，因此我希望尽可能避免引入库（例如 Modernizr）。
【问题讨论】：
标签： javascript html
找出是否支持picture 实际上非常简单：
var pic = !!window.HTMLPictureElement;
console.log("picture supported: " + pic);
如果您的浏览器需要解决方法，这将打印false，如果它支持picture，则打印true。显然，这并不一定意味着对 picture 的支持也是完整且出色的（截至 2016 年初，它可能仍在许多浏览器中进行中）。
不管picture 元素是否内置了回退，我相信有正当理由想知道浏览器是否支持picture 元素。
例如，您可能希望提供自己的解决方法，而不是使用像 picturefill.js polyfill 这样的大型工具。
【讨论】：
您根本不需要检测浏览器。
<picture> 规范要求<picture> 的最后一个子元素是<img>。
如果不支持<picture>，则<img> 将正常呈现。 <img> 是您的后备选项。
【讨论】：
这是我到目前为止提出的。
注意：我只能在 Galaxy S4 和 S5 上的 Chrome、Galaxy S4 上的 WebView 和 iPhone 4 上的 Chrome 中进行测试。我的代码将在大屏幕上跳过此代码，所以我不需要在那里进行测试（它永远不会执行此代码）。因此，在有限的测试加上对此的“hacky”方法（只是闻起来很糟糕）加上我对这种方法的可行性/可靠性的有限了解之间，我不相信这甚至是一种可行的方法（更不用说一个好的方法了）。
var mypic = document.createElement('picture');
// Will be '[object HTMLPictureElement]' when supported; '[object HTMLUnknownElement]' otherwise
var strObj = '' + mypic;
if(strObj.indexOf("HTMLPictureElement") != -1)
{
// Picture element supported
}
else
{
// Picture element not supported
}
【讨论】：
昆汀是对的；不需要 JS。但是，如果您需要根据媒体查询更改图像 URL，则可以使用 CSS。您可能需要考虑使用它来代替 <picture> 标记。
@media (min-device-width: 600px) {
.myimage {
content: url(myimage.jpeg);
}
}
断点（本例中为 600 像素）由您决定。
【讨论】：