DOM では、 MediaQueryList
インタフェースおよびそのメソッドやプロパティを用いて、メディアクエリの結果をプログラムで調べることができる機能を備えています。 MediaQueryList
オブジェクトを作成すると、クエリの結果を確認すること、あるいは結果が変化したときに自動的に通知を受け取ることができます。
メディアクエリリストの作成
クエリの結果を評価できるようにするのに先立ち、メディアクエリを示す MediaQueryList
オブジェクトを作成する必要があります。オブジェクトを作成するには、window.matchMedia
メソッドを用います。
例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:
var mediaQueryList = window.matchMedia("(orientation: portrait)");
クエリの結果の確認
メディアクエリリストが作成されると、その matches
プロパティの値を参照することで、クエリの結果を確認することができます。このプロパティは、クエリの結果を反映します。
if (mediaQueryList.matches) { /* 現在ビューポートが縦長である */ } else { /* 現在ビューポートが縦長ではない、すなわち横長である */ }
クエリの通知の受信
クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりもリスナーを登録することが効率的です。このためには、 MediaQueryList
オブジェクトの addListener()
メソッドを呼び出し、メディアクエリの状態が変化したときに (例えば、メディアクエリの結果が true
から false
へ移行した場合に) 呼び出されるコールバック関数を設定してください。
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list. function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義 mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加 handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。
このコードではデバイスの向き (orientation) を評価するメディアクエリリストを作成し、次にリスナーを追加しています。リスナーを追加した後、そのリスナーが実際に一度呼び出されることに注意してください。これにより、リスナーは現在のデバイスの向きを基にして初期状態の調整を行うことができます (そうでなければ、コードではデバイスの初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。
次で実装する handleOrientationChange()
メソッドでは、クエリの結果の確認やデバイスの向きが変わったときに必要な処理を行います。
function handleOrientationChange(evt) { if (evt.matches) { /* 現在ビューポートが縦長 */ } else { /* 現在ビューポートが横長 */ } }
上記で、 evt
— イベントオブジェクトの引数を定義しています。これは MediaQueryList
の新しい実装を扱うイベントリスナーの標準の方法なのでお分かりでしょう。非標準の MediaQueryListListener
メカニズムはもう使われませんが、標準のイベントリスナーのセットアップでは、 MediaQueryListEvent
のイベントオブジェクトをコールバック関数の引数として渡します。
このイベントオブジェクトは media
及び match
プロパティも含んでおり、 MediaQueryList
のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。
クエリの通知の終了
メディアクエリの値の変化について通知を受ける必要がなくなったときは、MediaQueryList
オブジェクトの removeListener()
メソッドを呼び出してください。
mediaQueryList.removeListener(handleOrientationChange);
ブラウザーの対応
MediaQueryList
インターフェイス
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaQueryList | Chrome 完全対応 9 | Edge 完全対応 あり | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 12.1 | Safari 完全対応 5.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 5 | Samsung Internet Android ? |
EventListener objects as parameters | Chrome 完全対応 45 | Edge ? | Firefox 完全対応 55 | IE 未対応 なし | Opera 未対応 なし | Safari ? | WebView Android 完全対応 45 | Chrome Android 完全対応 45 | Firefox Android 完全対応 55 | Opera Android 未対応 なし | Safari iOS ? | Samsung Internet Android ? |
MediaQueryList inheriting from EventTarget | Chrome 完全対応 45 | Edge 完全対応 16 | Firefox 完全対応 55 | IE 未対応 なし | Opera 完全対応 あり | Safari 未対応 なし | WebView Android 完全対応 45 | Chrome Android 完全対応 45 | Firefox Android 完全対応 55 | Opera Android 完全対応 あり | Safari iOS 未対応 なし | Samsung Internet Android ? |
addListener | Chrome 完全対応 9 | Edge 完全対応 12 | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 12.1 | Safari 完全対応 5.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 5 | Samsung Internet Android ? |
matches | Chrome 完全対応 9 | Edge 完全対応 12 | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 12.1 | Safari 完全対応 5.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 5 | Samsung Internet Android ? |
media | Chrome 完全対応 9 | Edge 完全対応 12 | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 12.1 | Safari 完全対応 5.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 5 | Samsung Internet Android ? |
onchange | Chrome 完全対応 45 | Edge ? | Firefox 完全対応 55 | IE 未対応 なし | Opera 完全対応 あり | Safari 未対応 なし | WebView Android 完全対応 45 | Chrome Android 完全対応 45 | Firefox Android 完全対応 55 | Opera Android 完全対応 あり | Safari iOS 未対応 なし | Samsung Internet Android ? |
removeListener | Chrome 完全対応 9 | Edge 完全対応 12 | Firefox 完全対応 6 | IE 完全対応 10 | Opera 完全対応 12.1 | Safari 完全対応 5.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 5 | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。