window.matchMedia

概要

指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。

構文

mql = window.matchMedia(mediaQueryString)

mediaQueryString は、新しい MediaQueryList オブジェクトを返すための、メディアクエリ文字列です。

js
if (window.matchMedia("(min-width: 400px)").matches) {
  /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
  /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}

このコードでは、ウィンドウが非常に狭いときに、何か別の処理を行うことができます。

他にも『コード内でのメディアクエリの使用』にいくつか例があります。

仕様

Specification
CSSOM View Module
# dom-window-matchmedia

ブラウザ互換性

BCD tables only load in the browser

関連記事