1. Media QueriesをJavaScriptで操作
JavaScriptでマルチデバイスに対応

2. Media Queries + JavaScript
 デバイスによって見栄えを変更するだけではなく、
実行される処理も変えたい。

3. 用語
 CSS Object Model
 DOM 2 Style 次期仕様
 window.matchMedia
 Media QueriesをJavaScriptで扱うためのメソッド
 MediaQueryList
 documentのメディアクエリのリストを保持するDOMオ
ブジェクト

4. JavaScriptでメディアクエリを使用
 window.matchMediaを使うことでメディアクエリを利用。
このクエリはMediaQueryListオブジェクトを返す。
 MediaQueryListで出来ること
 matches：
 クエリがマッチするかどうかの真偽値
 media：
 シリアライズされたメディアクエリのリスト
 addListener：
 イベントリスナをメディアクエリに追加
 removeListener：
 イベントリスナをメディアクエリから削除する

5. 具体例
 viewportのwidthによる分岐処理
if (window.matchMedia( “(min-width: 480px)” ).matches) {
// 幅が480px以上の場合
} else {
// 幅が480px未満の場合
}
 devicePixelRatioによる分岐処理
if (window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5)").matches) {
// devicePixelRatioが1.5以上の場合
} else {
// devicePixelRatioが1.5未満の場合
}

6. ライブラリ関連
 Javascript onMediaQuery
https://github.com/JoshBarr/js-media-queries
 enquire.js - Awesome Media Queries in JavaScript
http://wickynilliams.github.com/enquire.js/
 syze: Think @media queries powered by Javascript
http://rezitech.github.com/syze/

7. まとめ
 簡易処理の場合はwindow.matchMedia を使って処理
 複雑な処理をする場合はライブラリを使用することを検討
 ブラウザの互換性を確認