2

ブラウザーが CSS3 メディア クエリをサポートしているかどうかを JavaScript で検出するにはどうすればよいですか?

ブラウザーが CSS3 グラデーションをサポートしているかどうかを JavaScript で検出するにはどうすればよいですか?

ありがとうございました。

4

1 に答える 1

14

Modernizr (メディア クエリをテストできる) を開くと、 window.matchMedia( MDN ページ) 関数が使用されていることがわかります。この関数が存在するかどうかを確認するために、単純な古いバニラ JS をチェックインできます (Modernizr は本当に素晴らしいですが、家ではなくレンガが必要な場合もあります)。

function mediaQueriesSupported()
{
    if(typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined")
    {
        // alert("media queries are supported!");
        return true;
    }else{
        // alert("no media query support :(");
        return false;
    }
}

またはよりエレガントに：

function mediaQueriesSupported()
{
    return (typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined");
}

JSFiddle

メディア クエリをサポートする次のブラウザーでテストしたところ、すべて正しく true が返されました。

  • サファリモバイル
  • クロム 26

メディア クエリをサポートしていない次のブラウザーでテストしたところ、すべて正しく false が返されました。

  • IE7

勾配サポートの検出に関しては、こことここにいくつかの優れた回答があります。事実上、プロパティを設定して、事後にそれをテストするだけです。ブラウザーは、ジャンクまたはサポートされていない CSS プロパティを破棄します。

編集：

Niet は、勾配検出に関する私の提案と同様に、この問題に対する優れた回答を提供しています。これは純粋な Javascript ではありません (非常に少量の CSS が必要です) が、絶対に簡単な方法です。

于 2013-06-19T23:34:11.423 に答える