MediaQueryList.matches

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

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

構文

var matches = <varm>MediaQueryList.matches;

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

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

function addMQListener(mq, callback) {
  if (mq.addEventListener) {
    mq.addEventListener("change", callback);
  } else {
    mq.addListener(callback);
  }
}

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

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
matches の定義
草案 編集者草稿

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
matchesChrome 完全対応 9Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報