window.matchMedia

概要

指定された メディアクエリ文字列のパース結果を表す、新しい 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() の定義
草案 初期定義

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
matchMediaChrome 完全対応 9Edge 完全対応 12Firefox 完全対応 6IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 5.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 6Opera Android 完全対応 12.1Safari iOS 完全対応 5Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連記事