MediaQueryList: matches プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

matchesMediaQueryList インターフェイスの読み取り専用プロパティで、論理値です。 document が現在メディアクエリーリストと一致している場合は true を返し、一致していない場合は false を返します。

matches の値が変化した場合は、 MediaQueryList で発生する change イベントを監視することで通知を受けることができます。

boolean。 document が現在メディアクエリーのリストに一致していれば true を返し、そうでなければ false を返します。

この例では orientation メディア特性を使用したメディアクエリーを作成することにより、ビューポートの向きの変化を検出します。

js
const mql = window.matchMedia("(orientation:landscape)");
mql.addEventListener("change", (event) => {
  if (event.matches) {
    /* 横向きの画面になった */
  } else {
    /* 縦向きの画面になった */
  }
});

仕様書

Specification
CSSOM View Module
# dom-mediaquerylist-matches

ブラウザーの互換性

BCD tables only load in the browser

関連情報