概要

指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。

構文

mql = window.matchMedia(mediaQueryString)

mediaQueryString は、新しい MediaQueryList オブジェクトを返すための、メディアクエリ文字列です。

if (window.matchMedia( "(min-width: 400px)" ).matches) {
  /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */
} else {
  /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */
}

このコードでは、ウィンドウが非常に狭いときに、何か別の処理を行うことができます。

他にも『コード内でのメディアクエリの使用』にいくつか例があります。

仕様

仕様書 策定状況 コメント
CSS Object Model (CSSOM) View Module
Window.matchMedia() の定義
草案 初期定義

ブラウザ互換性

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

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 9 6.0 (6.0) 10 12.1 5.1
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 3.0 6.0 (6.0) 未サポート 12.1 5

関連記事

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

このページの貢献者: Uemmra3, fscholz, AshfaqHossain, ethertank, Kohei
最終更新者: Uemmra3,