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 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 6Opera Android 完全対応 12.1Safari iOS 完全対応 5Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連記事