[JavasScript] おれメモ、window.matchMediaってなんだ？

2013.11.28 18:44 author: taikiken | 0件のコメント

window.matchMedia なるものがあるらしい。

グローバル・オブジェクトなのね。

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

modest 記事によれば CSS メディアクエリと同様のことができるそうな。

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

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

widthQuery は MediaQueryList オブジェクトだって。
MDN: MediaQueryList

property
matches {Boolean}
media {DOMString}

method
addListener( listener )
listener {Function} イベントリスナ

removeListener( listener )
listener {Function} イベントリスナ

ふ〜ん、なんだか便利そう。
対応ブラウザは以下のブラウザ、OS バージョン以上。
Chrome 9
Safari 5.1
Firefox 6.0
IE 10

Android 3.0
mobile Safari 5

なんだよー
IE 9では使えないのか。
Android 2系もだめなんだな。

IE 9やAndroid 2系のためのライブラリがあるらしい。
github: matchMedia.js

matchMedia.js
matchMedia.addListener.js

の２つのJS読み込んで使うらしい。

Browser 対応
caniuse.com
Chrome 9
Safari 5.1
Firefox 6
IE 10

mobile Safari 5
Android Browser 3
Android Chrome 31
Android Firefox 25
IE mobile 10

Android ブラウザ事情がやばすぎる、matchMedia に限らず。