MediaQueryList

MediaQueryList オブジェクトは、document に適用された メディアクエリー の情報を格納し、メディアクエリーの状態が変更された時(つまり、メディアクエリーのテストがtrueという評価を開始したときと中止したとき)にリスナーに通知を送信します。

このオブジェクトにより、値を定期的にポーリングするのではなく、document を監視してメディアクエリーが変更されたことを検知できます。また、メディアクエリーの状態を基にプログラムで document に変更を加えることができます。

プロパティ

MediaQueryList インターフェイスの新しいバージョンは、親インターフェイスである EventTarget からのプロパティを継承します。

MediaQueryList.matches 読取専用

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

MediaQueryList.media 読取専用

シリアライズされたメディアクエリーを表す DOMString。

イベントハンドラー

MediaQueryList.onchange

change イベントの発火時 (メディアクエリーのサポート状態が変更された時) に呼び出される関数を表すイベントハンドラープロパティ。イベントオブジェクトは、後方互換性のため古いブラウザーにおいて MediaListQuery インスタンスとして認識される MediaQueryListEvent インスタンスです。

メソッド

MediaQueryList インターフェイスの新しいバージョンは、親インターフェイスである EventTarget からのメソッドを継承します。

MediaQueryList.addListener()

MediaQueryListener にリスナーを追加します。これは、メディアクエリーの状態変更に応じてカスタムのコールバック関数を実行します。これは基本的に、EventTarget.addEventListener() の別名であり、後方互換性のためのものです。

MediaQueryList.removeListener()

MediaQueryListener からリスナーを除去します。これは基本的に、EventTarget.removeEventListener() の別名であり、後方互換性のためのものです。

例

この簡単なコード例は、MediaQueryList を作成し、メディアクエリーの状態変更時に検出するリスナーをセットアップします。これは、ページの外観の変更時に、カスタム関数を実行します。

var para = document.querySelector('p');

var mql = window.matchMedia('(max-width: 600px)');

function screenTest(e) {
  if (e.matches) {
    /* ビューポートが 600px 幅より狭い */
    para.textContent = 'This is a narrow screen — less than 600px wide.';
    document.body.style.backgroundColor = 'red';
  } else {
    /* ビューポートが 600px 幅より広い */
    para.textContent = 'This is a wide screen — more than 600px wide.';
    document.body.style.backgroundColor = 'blue';
  }
}

mql.addListener(screenTest);

仕様

ブラウザーの実装状況

関連情報

• メディアクエリー
• スクリプトからメディアクエリーを扱う
• window.matchMedia()
• MediaQueryListListener
• MediaQueryListEvent