CSS3のMedia QueriesをjQueryで代替する方法

スマートフォンの利用者が多くなってきましたが、ウェブサイトのスマートフォンへの対応、みんなどうしているのかな?と思う今日この頃。

スマートフォンへの対応策の一つにCSS3のMedia Queriesを利用するというのがあります。簡単に説明すると、端末毎の表示可能領域の違いを利用してCSSを振り分けるって方法です。

正確には、ディスプレイやウィンドウのサイズに合わせたデザインを提供して、結果的にスマートフォンでも見やすい状態にするってことなんですけどね。

だから、スマートフォンに限らず全てのブラウザで利用できる技術なんですが、策定中のCSS3なので、当然、古いブラウザは対応していません。

そこで、Media QueriesをjQueryで代替する、言わばMedia jQueries的なものを紹介します。

まずはjQueryで以下のコードを作成。

function mediaQueryClass(width) {
  if(width > 960) {
    $('body').addClass('w960').removeClass('w640').removeClass('w480').removeClass('w320');
  } else if(width > 640) {
    $('body').removeClass('w960').addClass('w640').removeClass('w480').removeClass('w320');
  } else if(width > 480) {
    $('body').removeClass('w960').removeClass('w640').addClass('w480').removeClass('w320');
  } else {
    $('body').removeClass('w960').removeClass('w640').removeClass('w480').addClass('w320');
  }
}
mediaQueryClass($(window).width());
$(window).resize(function(){
  mediaQueryClass($(window).width());
});

mediaQueryClassファンクションで、body要素にw960・w640・w480・w320といったclassを addClass() で追加し、ウィンドウがリサイズされた場合には、リサイズされる前に追加されたclassを removeClass() で削除するっていう簡単な仕組みです。

あとは、CSSファイルで body.w960body.w640body.w480body.w320 から始まるセレクタでスタイルを適用すればOKです。