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 インターフェイス

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 9Edge 完全対応 ありFirefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
addListenerChrome 完全対応 9Edge 完全対応 ありFirefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
matchesChrome 完全対応 9Edge 完全対応 ありFirefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
mediaChrome 完全対応 9Edge 完全対応 ありFirefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
onchangeChrome 完全対応 ありEdge ? Firefox 完全対応 55IE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 未対応 なしChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 55Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android ?
removeListenerChrome 完全対応 9Edge 完全対応 ありFirefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
EventListener objects as parametersChrome 未対応 なしEdge ? Firefox 完全対応 55IE 未対応 なしOpera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 55Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
MediaQueryList inheriting from EventTargetChrome 完全対応 ありEdge 完全対応 16Firefox 完全対応 55IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 16Firefox Android 完全対応 55Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

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

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