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