MediaQueryList

A MediaQueryList オブジェクトは文書に適用されているメディアクエリの情報を格納し、文書の状態に対する中間かつイベントドリブンのマッチングに対応します。 MediaQueryList は matchMedia() を window オブジェクト上で呼び出すことで作成することができます。結果として得られるオブジェクトは、メディアクエリの状態が変化したとき (つまり、メディアクエリのテストが true の評価が開始または停止したとき) に、リスナーへの通知の送信を処理します。

これにより、定期的に値をポーリングするのではなく、文書を観察してメディアクエリが変更されたときに検出することが可能になり、メディアクエリの状態に基づいて文書にプログラム的に変更を加えることができるので、アダプティブデザインにとても便利です。

プロパティ

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

matches読取専用

Boolean で、 true であれば document が現在メディアクエリリストに一致しており、 false であればそうではありません。

media読取専用

DOMString で、シリアライズされたメディアクエリを表します。

メソッド

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

addListener()

MediaQueryList にコールバックを追加します。このコールバックは、メディアクエリの状態 (リスト内のメディアクエリと文書が一致するかどうか) が変化するたびに呼び出されます。このメソッドは、主に下位互換性のために存在します。可能であれば、代わりに addEventListener()を使用して change イベントを監視してください。

removeListener()

指定されたリスナーコールバックを、 MediaQueryList でメディアクエリの状態が変化するたび、すなわち MediaQueryList に列挙されたメディアクエリの一致・不一致の状態が変化するに呼び出されるコールバックから削除します。このメソッドは下位互換性のために保持されています。可能であれば、一般的に removeEventListener() を使用して、変更通知コールバックを削除してください (以前 addEventListener() を使用して追加されたものです)。

イベント

以下のイベントは MediaQueryList オブジェクトに配信されます。

change

文書に対してメディアクエリを実行した結果が変更されたときに MediaQueryList に送信されます。例えば、メディアクエリが (min-width: 400px) の場合、 change イベントが文書のビューポート}の幅が 400px の閾値を通過するよう変更されるたびに発行されます。
また、 onchange イベントハンドラープロパティを使用することもできます。

例

このシンプルな例では、 MediaQueryList を作成し、メディアクエリの状態が変化したときにそれを検出するリスナーを設定し、それがページの表示を変更するときにカスタム関数を実行します。

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

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = 'This is a narrow screen — less than 600px wide.';
    document.body.style.backgroundColor = 'red';
  } else {
    /* the viewport is more than than 600 pixels wide */
    para.textContent = 'This is a wide screen — more than 600px wide.';
    document.body.style.backgroundColor = 'blue';
  }
}

mql.addEventListener(screenTest);

他の例は個別のプロパティやメソッドのページにあります。

仕様書

ブラウザーの互換性

関連情報

• メディアクエリ
• コードからのメディアクエリの使用
• window.matchMedia()
• MediaQueryListListener
• MediaQueryListEvent
• Window.devicePixelRatio の記事にも有益な例があります