matchMedia
Window インターフェイスの matchMedia() メソッドは、新しい MediaQueryList オブジェクトを返します。このオブジェクトを使用すると、この文書 (document) がメディアクエリー文字列に一致するかどうかを判断できるほか、文書を監視して、そのメディアクエリーに一致した（または一致しなくなった）タイミングを検出することもできます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 9 | 12 | 6 | 5.1 | 18 | 5 | |
| MediaQueryList オブジェクトは文書に適用されているメディアクエリーの情報を格納し、文書の状態に対する即時かつイベント駆動の照合に対応します。 | 9 | 12 | 6 | 5.1 | 18 | 5 |
| change は MediaQueryList インターフェイスのイベントで、メディアクエリーの状態が変化した時に発生します。 | 39 | 79 | 55 | 14 | 39 | 14 |
EventTarget_inheritance `MediaQueryList` は `EventTarget` を継承しています | 39 | 16 | 55 | 14 | 39 | 14 |
| matches は MediaQueryList インターフェイスの読み取り専用プロパティで、論理値です。 document が現在メディアクエリーリストと一致している場合は true を返し、一致していない場合は false を返します。 | 9 | 12 | 6 | 5.1 | 18 | 5 |
| media は MediaQueryList インターフェイスの読み取り専用プロパティであり、シリアライズされたメディアクエリーを表す文字列を返します。 | 9 | 12 | 6 | 5.1 | 18 | 5 |
| MediaQueryListEvent オブジェクトは、 MediaQueryList オブジェクトに対して起こった変更に関する情報を格納します。インスタンスは MediaQueryList.change_event イベントによって参照される関数のイベントオブジェクトとして利用できます。 | 39 | 79 | 55 | 14 | 39 | 14 |
| matches は MediaQueryListEvent インターフェイスの読み取り専用プロパティで、論理値です。 true ならば document が現在メディアクエリーリストに一致していることを表し、 false はそうでないことを表します。 | 39 | 79 | 55 | 14 | 39 | 14 |
| media は MediaQueryListEvent インターフェイスの読み取り専用プロパティで、シリアライズされたメディアクエリーを表す文字列です。 | 39 | 79 | 55 | 14 | 39 | 14 |
| MediaQueryListEvent() コンストラクターは、新しい MediaQueryListEvent オブジェクトを生成します。 | 39 | 79 | 55 | 14 | 39 | 14 |
基本構文
matchMedia(mediaQueryString)実務での使いどころ
-
matchMedia の活用
Window インターフェイスの matchMedia() メソッドは、新しい MediaQueryList オブジェクトを返します。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。