window.matchMediaを使ってjava scriptでメディアクエリを行なってみる

Pocket
[`evernote` not found]

あまりモバイル系には強くないので、あれなんですけど・・・
ワンソースでPC、モバイルと対応させる場合、css3のメディアクエリを利用するのが一般的です。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

こんな感じで、デバイスの幅に応じてcssファイルを読み替えたりするんですが、同じ事をjava scriptのwindow.matchMediaで実現できるようなので、試してみました。

今回やってみたことは、ウィンドウの幅に応じて、背景の色とテキストを変えるようにしてみました。
firefoxやchormeでウインドウ幅を適当に縮めてもらって再読み込みをすると背景の色が変わるはずです。

DEMO

$(document).ready(function(){
if (window.matchMedia("(min-width: 980px)").matches) {
          $('body').css('background','#fab174');
          $('p').html('横幅が980px以上です。')
} else if(window.matchMedia("(min-width: 480px)").matches) {
          $('body').css('background','#fc9dd9');
          $('p').html('横幅が480px以上です。')
}else{
          $('body').css('background','#9da3fc');
          $('p').html('横幅が479px以下です。')
}
});

こんな感じで、3つのウインドウ幅に対してそれぞれの処理を入れています。

window.matchMedia("(min-width: 980px)").matches

iPadでデモを見たところ、対応しているようでした。
残念ながら、僕の携帯(Android 2.1)に載っているブラウザは対応しておりませんで、対応ブラウザは下記のようです。

Firefox 6 以降
Google Chrome 9 以降
Safari 5.1+
モバイル版 Firefox
Android 版の Google Chrome ベータ
iOS 版の Safari 5

Android系がちょっと弱いので、微妙なんですが、java scriptでメディアクエリを管理できるようになると、例えば、デバイスに応じてjava scriptのライブラリを読み替えたりもできるようになります。
モバイルデバイスだけ、jquery mobileを読み込ませたりできるかもしれないですね。
既存のモバイル系のライブラリはpc環境ではどうしてもデザインの表現性に欠けてしまったりと、扱いにくかったりしますので、こういったアプローチは試してみてもいいかもしれませんね。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。