レスポンシブWEBデザインでスクリーン幅を正確に判定する方法

CSS3のMedia Queries (メディアクエリ)を使用することでスクリーンサイズ別に異なるスタイルを指定出来ます。例えば、スクリーンサイズが768px以上の場合のスタイルの指定は以下のとおりです。

@media screen and (min-width: 768px) {
     /*スクリーンサイズが768px以上のスタイルを記述*/
}

JavaScriptでもスクリーンサイズによって同じような判別をする場合 $(window).width() を使うと正しく動作しない時があります。縦スクロールがある画面でスクリーンサイズを $(window).width() で取得するとスクロールバーの幅が省かれるからです。

if ($(window).width() >= 768) {
     /*スクリーンサイズが768px以上とは判定されない場合がある*/
}

これを解決するためにmatchMediaを使用して記述することが出来ます。

if (window.matchMedia('(min-width: 768px)').matches) {
     /*スクリーンサイズが768px以上の処理を記述*/
}

ただし、matchMedia はIE10以降の対応のためIE9に対応させるためには別の方法で行ないます。CSSのcontentプロパティとJavaScriptを用いる方法で行ないます。まず、CSSのメディアクエリでcontentプロパティを指定します。

#main {
      content: 'mobile';
}
@media screen and (min-width: 768px) {
     #main {
            content: 'desktop';
     }
}

JavaScript側でcontentプロパティを取得して判断します。

$(function() {
      if ($('#main').css('content') === 'desktop') {
        /*スクリーンサイズが768px以上の処理を記述*/
    } else {
        /*スクリーンサイズが768px未満の処理を記述*/
    }
});