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);
}
&nbsp;
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);
	})();

view raw matchMedia.js hosted with ❤ by GitHub

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 はサポートしていません。