Question

作为更新我的网站以更加适合移动设备的一部分，我需要根据屏幕/浏览器大小提供不同的图像。我曾经遇到过＆＃34;图片＆＃34;在支持时工作得很好的元素。目前的问题是它无处不在。我想检测一下＆＃34;图片＆＃34;浏览器支持元素，因此我可以回退到另一种方法。

如何检测＆＃34;图片＆＃34;浏览器支持元素吗？

由于这是我目前唯一需要检查的类型，如果可能的话，我想避免拉入图书馆（例如Modernizr）。

Answer 1

确定是否支持picture实际上非常简单：

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

如果您的浏览器需要解决方法，则会打印false;如果支持true，则会picture。显然，它并不一定意味着对picture的支持也是完整而且很棒（截至2016年初，它可能仍在许多浏览器中正在进行中）。

无论内置回退的picture元素如何，我认为有合理的理由想知道浏览器是否支持picture元素。

例如，您可能希望提供自己的解决方法，而不是使用类似picturefill.js polyfill的大量内容。

Answer 2

您根本不需要检测浏览器。

<picture>规范要求<picture>的最后一个子元素是<img>。

如果<picture>不受支持，则<img>将正常呈现。 <img>是你的后退。

Answer 3

这是我到目前为止所做的事情。

注意：我只能在Chrome上使用Galaxy S4＆amp; S5，Galaxy S4上的WebView和iPhone 4上的Chrome。我的代码将在更大的屏幕上跳过此代码，因此我不需要在那里进行测试（它永远不会执行此代码）。所以在有限的测试加上＆＃34; hacky＆＃34;这方面的方法（只是闻起来很糟糕）加上我对这种方法的可行性/可靠性的了解有限，我不相信这甚至是一种可行的方法（更不用说一种好的方法）。

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
}

Answer 4

昆汀是对的;不需要JS。但是，如果您需要根据媒体查询更改图像URL，则可以使用CSS。您可能需要考虑使用此代码而不是<picture>标记。

@media (min-device-width: 600px) {
    .myimage {
        content: url(myimage.jpeg);
    }
}

断点（本例中为600px）取决于你。

如何检测浏览器支持＆＃34;图片＆＃34;元件

4 个答案: