html - JavaScript: 部分特徴検出 (srcset)

Question

古いブラウザー用の JavaScript パッチを作成しようとしています。通常、次のような機能検出コードから始めます。

var img=new Image();
if(img.getAttribute('srcset')) … // already support

しかし、この機能を部分的に実装しているブラウザーには問題があります。

具体的には、srcset 属性にパッチを適用しようとしています。最新のブラウザーのほとんどは、属性がサポートされていると報告しますが、すべてが完全にサポートしているわけではありません (x プロパティはサポートしていますが、w プロパティはサポートしていません)。

これを検出する JavaScript メソッドはありますか?

ありがとう

Answer 1

これらのポリフィルの 1 つの問題点:

• https://github.com/scottjehl/picturefill
• https://github.com/aFarkas/respimage

または、次のような部分的なポリフィル:

• https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/respimg

基本的な JS とレスポンシブ イメージの知識があれば、ブラウザーが幅記述子をサポートしているかどうかを検出するのは非常に簡単です。

したがって、上記のポリフィルのいずれかを使用することをお勧めします。

var img = document.createElement('img');
var isWSupported = ('sizes' in img);