これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

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

プロパティ

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

MediaQueryList.matches 読取専用
Booleandocument が現在メディアクエリーのリストにマッチしていれば 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);

補足: Github 上でこの例を見つけられます (ソースコード を参照。 ライブコード も参照してください)。

仕様

仕様書 策定状況 備考
CSS Object Model (CSSOM) View Module
MediaQueryList の定義
草案 初期定義。

ブラウザーの実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 9 (有) 6.0 (6.0) 10 12.1 5
New version spec update (有) 16 55 (55) 未サポート (有) (有)
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート ? (有) ? ? ? ? ?
New version spec update 未サポート ? 55.0 (55) 未サポート (有) ? (有)

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Marsf, ethertank
最終更新者: Marsf,