We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,