15

Javascript には、アクティブなメディア クエリを特定する直接的な方法 (CSS コードの解析を含まない) がありますか?

たとえば、次の 2 つのクエリがあります。

 @media screen and (max-width:800px)

 @media screen and (min-width:801px)

clientWidth を解析して確認せずに、これらのうちどれが true と評価されたかをどのように判断できますか。

4

5 に答える 5

15

これは古い質問ですが、この問題をグーグルで検索すると上位にランクされます。

Window.matchMediaは公式であり、すべての主要なブラウザー(IE10+) でサポートされており、特定のメディア クエリが現在一致しているかどうかをクエリできます。

元の質問から：

if (window.matchMedia('screen and (max-width:800px)').matches) {
    // it matches
} else {
    // does not match
}

次を返すMediaQueryListにイベント リスナーをアタッチすることで、クエリの一致結果がいつ変化するかをリッスンすることもできます。window.matchMedia

var mql = window.matchMedia('screen and (max-width:800px)');
mql.addEventListener(
    function(mq) {
        if (mq.matches) {
            // it matches
        } else {
            // does not match
        }
    }
);
于 2016-03-21T14:47:58.007 に答える
0

サイズ変更や向きの変更に対してさまざまなメディアクエリがどのように反応するかを確認するには、次のページのデモを試してください。

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

メディアクエリ属性を調整して、それらがページにどのように影響するかを把握できます。

于 2011-04-20T16:43:17.243 に答える
0

どのメディアクエリがアクティブかをどうやって知るかはわかりませんが...

…javascriptで画面幅だけ確認できないの？

if ( window.innerWidth >= 801 ) {
    // @media screen and (min-width:801px)
} else {
    // @media screen and (max-width:800px
}

または、ここで何が欠けていますか？

于 2016-02-09T03:03:19.720 に答える
0

ポール アイリッシュの MatchMedia がうまくいくかもしれません: https://github.com/paulirish/matchMedia.js

それはあなたがやろうとしていることに合いますか？

于 2011-04-14T01:03:27.543 に答える
0

こんにちは、これがお役に立てば幸いです。実際にクラスをセレクターに追加しています。このツールを使用しています: https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries -in-javascript/

実際、サイズ変更されたウィンドウ内でオンになっているものの明確な例がここにあります http://robnyman.github.io/matchmedia/

私の場合、関数を使用して取得できる特定のサイズにあるときに、特定のタスクを実行しているだけです。

于 2014-01-10T00:14:05.967 に答える