javascript(jQuery)でメディアクエリを判定する方法(IE9対応)

レスポンシブウェブデザインなWEBサイトを作る際、レイアウト切り替わり時に特定の処理を実行する必要が頻繁に出てくるのですが、単純にjQueryでブラウザ幅を取得して判断する方法ではなかなか上手く行かない場合が多いです。

そこで今回は、シンプル・確実に現在の表示レイアウトを判断する方法をご紹介したいと思います。

現在の表示レイアウトの判断方法

どのように判断するかというと、スマホ時（もしくはPCレイアウト時）のみに出現する要素を目印として、それが表示されているのかされていないのかを元に判断します。
よく目印として使うのはスマホレイアウト時にのみ出るハンバーガーボタン（ナビ開閉のボタン）ですね。

具体例は以下のとおりです。

<style>
  #MqMark {
    display: block;
  }
  @media screen and (max-width: 640px) {
    #MqMark {
      display: none;
    }
  }
</style>
<div id="MqMark"></div>

上のようなPCレイアウト時のみ出現する要素を目印とします（そのような目印がない場合は作ってしまいましょう）。

javascript部分は以下のようになります。

<script>
  $(function() {
    $(window).on('resize', function(){
      if ($('#MqMark').is(':visible')) {
        // PCレイアウト
        console.log('pc');
      } else {
        // スマホレイアウト
        console.log('sp');
      }
    });
  });
</script>

この方法だと現在のレイアウトの状態を正確に取得出来るのでオススメです。

他の方法

他の方法として「window.matchMedia」を使用する方法があります。

if (window.matchMedia('screen and (max-width:640px)').matches) {
  // スマホレイアウト
  console.log('sp');
} else {
  // PCレイアウト
  console.log('pc');
}

以上

これからレスポンシブウェブデザインでjavascriptを書くという方や、これまでwidthを使って判定していたという方は是非今回ご紹介した方法を使ってみてください。

以上、たにっぱでした〜