matchMedia関数でウィンドウサイズの変更を監視する
レスポンシブなウェブサイトで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後に登録した関数が呼ばれるようだ。 常に監視などはしていないようなので、パフォーマンスへの影響はそこまで大きくないと思う。
参考:
メディアクエリ
スクリプトからのメディアクエリの使用
















