#mediaquerylist

レスポンシブなウェブサイトでJavaScriptを書く必要があったのだけど、 そこでwindow.matchMediaを使うとウィンドウサイズの変更を監視できることを知った。

var mql = window.matchMedia('screen and (min-width: 768px)');

とすると、mqlにMediaQueryListが返ってくる。 matchMedia関数にはCSSで書いているメディアクエリの文字列そのものが渡せる。

mql.matches;

とすると、メディアクエリの条件に一致していた場合にtrueになっている。一致していない場合はfalseになる。

MediaQueryListにはリスナー関数を登録できる関数があって、addListener関数を使うと登録できる。

mql.addListener(function(event) { event.matches; });

登録したリスナー関数は、メディアクエリの条件が変更されたときに呼ばれる。

これでわざわざwindow.onresizeを監視する必要がなくなる。

caniuseによるとIE9以下で使用できない以外は主要ブラウザは使用できるようだ。

Can I use matchMedia?

IE9以下でも使用したい場合はmatchMedia.jsのpolyfillを使う。

<!--[if lt IE 10.0]> <script src="matchMedia.js"></script> <script src="matchMedia.addListener.js"></script> <![endif]-->

で良いと思う。

addListenerのコードを呼んだ感じでは、resizeが起きてから30ms後に登録した関数が呼ばれるようだ。 常に監視などはしていないようなので、パフォーマンスへの影響はそこまで大きくないと思う。

参考：

メディアクエリ