JavaScript オブジェクト

JavaScript リファレンスマニュアル

JS DOMリファレンスマニュアル

JS Storage オブジェクト JavaScript Window オブジェクト

Window matchMedia() メソッド

matchMedia()メソッドは、指定されたメディアクエリスト文字列の解析結果を表す新しいMediaQueryListオブジェクトを返します。

matchMedia()メソッドの値は、CSS @mediaルールのどんなメディア機能も、例えばmin-height、min-width、orientationなど。

文法：

window.matchMedia(mediaQueryString)

例

if (window.matchMedia("(min-width:　500px) matches) {
　　　/*　ビューポートviewportの最小値が500ピクセル幅　*/
}
　　　/*　ビューポートviewportの幅が小さい500ピクセル　*/
}

テストを見て‹/›

ブラウザの互換性

テーブルの数字は、matchMedia()メソッドを完全にサポートする最初のブラウザバージョンを指定しています：

メソッド
matchMedia()	9	6	12.1	5.1	10

パラメータ値

パラメータ	説明
mediaQueryString	メディアクエリストを返すための新しいMediaQueryListオブジェクトを返すための文字列

技術詳細

返り値：	指定されたCSSメディアクエリ文字列の結果を表す MediaQueryList オブジェクト

さらに多くの例

もしビューポートの幅が小さいかまたはそれ以下の場合600ピクセル、背景色は珊瑚色になります。もしそれが大きい場合600、それが薄緑色になります：

例

var size = window.matchMedia("(max-width:　600px")
myFunc(size)　//　リスナー関数をランタイムで呼び出す
size.addListener(myFunc)　//　状態変更時にリスナー関数を追加する
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　}
　document.body.style.backgroundColor = "lightgreen";
　　}
}