JavaScript でメディアクエリを行う window.matchMedia の使い方

原文: Using window.matchMedia to do media queries in JavaScript (on June 5, 2012 by Robert Nyman)

Web サイトを構築する人々にとって、レスポンシブ Web デザイン で、可能な限り多くのユーザがコンテンツを利用できるようにすることが自然なアプローチになってきました。これには CSS メディアクエリ が使われますが、JavaScript でも同じことができます。

window.matchMedia の紹介

JavaScript でメディアクエリを利用するには、window.matchMedia を使います。基本的には CSS で行うのと同じことを、JavaScript コールで行います:

var widthQuery = window.matchMedia("(min-width: 600px)");

このクエリは、MediaQueryList オブジェクトを返します。このオブジェクト上では、次のことができます:

matches
クエリがマッチするかどうかの真偽値。
media
シリアライズされたメディアクエリのリスト。
addListener
イベントリスナをメディアクエリに追加する。値のポーリングなどよりも優先される。
removeListener
イベントリスナをメディアクエリから削除する。

メディアクエリがマッチするかどうか簡単に調べるには、matches プロパティを使います:

var widthMatch = window.matchMedia("(min-height: 500px)").matches;

リスナを追加するのはとても簡単です:

function getOrientationValue (mediaQueryList) {
    console.log(mediaQueryList.matches);
}
 
portraitOrientationCheck = window.matchMedia("(orientation: portrait)");
portraitOrientationCheck.addListener(getOrientationValue);

デモとソースコード

window.matchMedia のデモ で、いくつかのクエリの動作を確かめられます。ウィンドウをサイズ変更して値がどのように変わるか見てみてください。

このデモの完全な JavaScript コードは、GitHub にも置いてあります:

(function () {
    var matchMediaSupported = document.querySelector("#matchmedia-supported"),
        width600 = document.querySelector("#width-600"),
        height500 = document.querySelector("#height-500"),
        portraitOrientation = document.querySelector("#portrait-orientation"),
        width600Check,
        height500Check,
        portraitOrientationCheck;
 
    if (window.matchMedia) {
        matchMediaSupported.innerHTML = "supported";
 
        // Establishing media check
        width600Check = window.matchMedia("(min-width: 600px)"),
        height500Check = window.matchMedia("(min-height: 500px)"),
        portraitOrientationCheck = window.matchMedia("(orientation: portrait)");
 
        // Add listeners for detecting changes
        width600Check.addListener(setWidthValue);
        height500Check.addListener(setHeightValue);
        portraitOrientationCheck.addListener(setOrientationValue);
    }
 
    function setWidthValue (mediaQueryList) {
        width600.innerHTML = mediaQueryList.media;
    }
 
    function setHeightValue (mediaQueryList) {
        height500.innerHTML = mediaQueryList.matches;
    }
 
    function setOrientationValue (mediaQueryList) {
        portraitOrientation.innerHTML = mediaQueryList.matches;
    }
 
    // Setting initial values at load
    function setValues () {
        width600.innerHTML = width600Check.matches;
        height500.innerHTML = height500Check.matches;
        portraitOrientation.innerHTML = portraitOrientationCheck.matches;
    }
 
    window.addEventListener("DOMContentLoaded", setValues, false);
})();

Web ブラウザのサポート

この記事の執筆時点で、window.matchMedia は次のブラウザに実装されています:

  • Firefox 6 以降。
  • Google Chrome 9 以降。
  • Safari 5.1+。注記: addListener はサポートしていません。
  • モバイル版 Firefox
  • Android 版の Google Chrome ベータ。注記: addListener はサポートしていません。
  • iOS 版の Safari 5。注記: addListener はサポートしていません。
  • Android ストックブラウザ。注記: addListener はサポートしていません。

Internet Explorer 10 でのサポートも計画されています。

古い、サポートしていない Web ブラウザでは、matchMedia() polyfill を試してみてください。ただし、addListener はサポートしていません。