Window matchMedia()メソッド

定義と使用方法

matchMedia() メソッドは、クエリ結果を含むMediaQueryListを返します。

参照もしくは詳細：

MediaQueryListオブジェクト

メディアクエリ

matchMedia()メソッドのメディアクエリは、min-height、min-width、orientationなどのCSS @mediaルールのメディア特性のいずれでもできます。

インスタンス

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

インスタンス

例1

スクリーン/ビューポットの幅が700ピクセル以上かどうか：

if (window.matchMedia("(max-width: 700px)").matches) {
  // ビューポットの幅が700ピクセル以下
}
  // ビューポットの幅が700ピクセル以上
}

自分で試してみてください

例の説明

この例では、メディアクエリを実行し、現在のウィンドウの状態と比較します。

ウィンドウの状態が変更されたときにリスポンシブなメディアクエリを実行する場合は、MediaQueryListオブジェクトにイベントリスナーを追加してください（以下の「さらに詳しく」を参照）：

例2

ウィンドウのビューポートが500ピクセル以下の場合、背景色を黄色に、それ以外の場合はピンクに設定します：

// 匹配合成関数の作成：
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// MediaQueryListオブジェクトの作成：
const mmObj = window.matchMedia("(max-width: 700px)");
// ルンタイムでmatch関数を呼び出します：
myFunction(mmObj);
// match関数を状態変化のリスナーとして追加：
mmObj.addListener(myFunction);

自分で試してみてください

文法

window.matchMedia("mediaQuery)

パラメータ

パラメータ 説明
mediaQuery 必須。メディアクエリを表す文字列。

返り値

タイプ 説明
オブジェクト メディアクエリの結果を持つ MediaQueryList オブジェクト。

ブラウザサポート

すべてのブラウザがサポートしています matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 11 サポート サポート サポート サポート