MediaQueryList

A MediaQueryList オブジェクトは文書に適用されているメディアクエリの情報を格納し、文書の状態に対する中間かつイベントドリブンのマッチングに対応します。 MediaQueryListmatchMedia()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);

: この例は GitHub にあります (ソースコードを参照、およびライブで実行)。

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

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
MediaQueryList の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MediaQueryListChrome 完全対応 9Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5.1
補足
完全対応 5.1
補足
補足 Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.
WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5
補足
完全対応 5
補足
補足 Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.
Samsung Internet Android 完全対応 1.0
EventListener objects as parametersChrome 完全対応 45Edge 完全対応 ≤79Firefox 完全対応 55IE 未対応 なしOpera 未対応 なしSafari ? WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 55Opera Android 未対応 なしSafari iOS ? Samsung Internet Android 完全対応 5.0
MediaQueryList inherits EventTargetChrome 完全対応 45Edge 完全対応 16Firefox 完全対応 55IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 55Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
addListener()Chrome 完全対応 9Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5.1
補足
完全対応 5.1
補足
補足 Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.
WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5
補足
完全対応 5
補足
補足 Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.
Samsung Internet Android 完全対応 1.0
matchesChrome 完全対応 9Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
mediaChrome 完全対応 9Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5.1WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5Samsung Internet Android 完全対応 1.0
onchangeChrome 完全対応 45Edge 完全対応 ≤79Firefox 完全対応 55IE 未対応 なしOpera 完全対応 ありSafari 完全対応 14WebView Android 完全対応 45Chrome Android 完全対応 45Firefox Android 完全対応 55Opera Android 完全対応 ありSafari iOS 完全対応 14Samsung Internet Android 完全対応 5.0
removeListener()Chrome 完全対応 9Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5.1
補足
完全対応 5.1
補足
補足 Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.
WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 5
補足
完全対応 5
補足
補足 Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.
Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報