any奇妙に聞こえるかもしれませんが、メディアクエリがブラウザーでサポートされているかどうかをテストする簡単な方法を探しています。
window.matchMediaポリフィルが付属しているRespondjsがあることは知っていますが、それを使用しても、次のような特定のクエリをクエリする必要があります。
window.matchMedia("all and (min-width: 400px"));
を返しますobj.matches = true/false。
私が探しているのは、「mediaQueries がサポートされているかどうか」、はいまたはいいえをテストする一般的な方法です。
私は現在使用しています：
window.matchMedia("screen and (orienation:landscape),
screen and (orientation:portrait)");
しかし、私はこのテスト方法があまり好きではありません。
私も試しました：
window.matchMedia("all");
しかし、これは（もちろん）ポリフィルtrueを使用するとIE8で返されます。また、メディアクエリをサポートしているが( caniuse )をサポートしていない多くのブラウザーを見逃してしまうため、それ自体をmatchMediaテストすることはできません。matchMediawindow.matchMedia
質問:
メディア クエリのサポートをテストする簡単な方法はありますか? 可能であれば、それを行うためwindow.matchMediaにまったく使用したくありません。
編集:特定の mediaQuery 条件 ( mq ) もテストするModernizrもチェック
しました。
testMediaQuery = function( mq ) {
var matchMedia = window.matchMedia || window.msMatchMedia;
if ( matchMedia ) {
return matchMedia(mq).matches;
}
var bool;
injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) {
bool = (window.getComputedStyle ?
getComputedStyle(node, null) :
node.currentStyle)['position'] == 'absolute';
});
return bool;
},
したがって、mediaQueries がサポートされている場合、一般的なテストはありません。