如何檢測「圖片」元素的瀏覽器支持

作爲更新我的網站以便更加移動友好的一部分，我需要根據屏幕/瀏覽器大小提供不同的圖像。我遇到過使用「圖片」元素，它支持時效果很好。目前的問題是它並不是到處都支持。我想檢測瀏覽器是否支持「圖片」元素，這樣我可以回退到不同的方法。如何檢測「圖片」元素的瀏覽器支持

如何檢測瀏覽器是否支持「圖片」元素？

由於這是我目前需要的唯一檢查類型，所以如果可能的話，我想避免在圖書館（例如Modernizr）拉扯。

來源

2015-09-20 codesniffer

根本不需要檢測瀏覽器。

<picture>規範要求<picture>的最後一個子元素是<img>。

如果<picture>不支持比<img>將會正常呈現。 <img>是你的後退。

來源

2015-09-20 20:34:40 Quentin

是我倒退我的典型屏幕尺寸（在我的情況下，桌面）。但是我需要回顧一種爲非默認圖像尺寸（即手機）提供不同圖像的方法。在我的情況下，它會回落到Javascript。我只需要邏輯來確定是否需要這樣的回退，當元素不受支持時就是這種情況。 – codesniffer

關於檢測圖片元素支持問題具體問，所以我會說這是一個不正確的答案。 – duncanwilcox

@duncanwilcox - 這個問題清楚地表明，目標是提供一個後備。它也做出一個錯誤的假設，即需要檢測圖片支持。這個答案解決了實際問題。 – Quentin

這就是我到目前爲止所提出的。

注意：我只能夠測試這在Chrome上的Galaxy S4 S5 &，銀河S4的WebView和Chrome支持iPhone 4，所以我沒有我的代碼將跳過了大屏幕上的代碼需要在那裏測試（它永遠不會執行此代碼）。因此，在有限的測試加上這種「哈克」方法（只是味道不好）以及我對這種方法的可行性/可靠性的有限知識之間，我並不相信這是一種可行的方法（更不用說是一種好方法）。

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 
}

來源

2015-09-22 00:44:55 codesniffer

昆汀是對的; JS不是必需的。不過，如果您需要根據媒體查詢更改圖片網址，則可以使用CSS。您可能要考慮完全使用此代替<picture>標記。

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

斷點（本例中爲600px）取決於您。

來源

2015-09-22 01:51:02

這很有趣，看起來很有希望根據這裏的內容。但是，從幾個谷歌搜索[1]（http://www.w3schools.com/cssref/pr_gen_content.asp），[2]（https://css-tricks.com/almanac/properties/c/content/），看起來'content'CSS屬性用於w/the：before和：after僞元素。 [This SO page]（http://stackoverflow.com/questions/11173991/content-attribute-of-img-elements）表明它不在正式規範中，並且有不同的支持。對我更多研究... – codesniffer

找出是否支持picture其實很簡單：

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

如果您的瀏覽器需要一個解決辦法或true如果它支持picture這將打印false。很顯然，這並不意味着對picture的支持也是完整且很好的（並且到2016年初，它在很多瀏覽器中可能仍在進行中）。

無論picture元素具有內置回退功能，我相信有合理的理由需要知道瀏覽器是否支持picture元素。

例如，您可能希望提供自己的解決方法，而不是使用諸如picturefill.js polyfill之類的大量內容。

來源

2016-01-12 12:41:46 duncanwilcox

如何檢測「圖片」元素的瀏覽器支持

回答

相關問題