CSS3のメディアクエリをjQueryでも使えるようにする

CSS3メディアクエリ便利ですよね。これを使ってjQueryで条件分岐したい場合もあると思います。特にレスポンシブデザインのサイトなんかだと使う機会も多いと思います。単純に思いつくのが、メディアクエリと同様にブラウザ幅をjQueryで取得して条件分岐すればいいのでは…なんて考えると思います。が、それだとブラウザによって誤差が出てしまうのです。

jQuery版メディアクエリ

/* スマートフォン */
@media screen and (max-width: 767px){
  .isSmart {
    display: none;
    width: 1px;
  }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .isTablet {
    display: none;
    width: 2px;
  }
}

/* デスクトップ */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .isDesktop {
    display: none;
    width: 3px;
  }
}

すごく簡単な方法です。まず、CSSメディアクエリで条件分岐した中にスマホ、タブレット、デスクトップを判定するための要素を追加します。

if($('.isSmart').css('width') == '1px')
{
  // スマートフォンの場合のコードを記述
}
else if($('.isTablet').css('width') == '2px')
{
  // タブレットの場合のコードを記述
}
else if($('.isDesktop').css('width') == '3px')
{
  // デスクトップの場合のコードを記述
}

こんな感じでjQueryで判定できます。

あとは、このhtmlコードをどこかに記述しましょう。単純な方法ではありますが、これが一番確実な方法だと思います。