jQueryでのメディアクエリ判定方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのメディアクエリ判定方法について、簡単に解説していきます。

メディアクエリとは

メディアクエリはCSSの仕様の一つです。

デバイスの幅によって、適用するスタイルを変えることができます。

@media screen and (max-width:768px){
  .hoge{
    width: 100%;
  }
}

例えば、上記のコードでは、スマホやタブレットでは、hogeのクラス名の要素の幅を100%にします。

メディアクエリの判定

メディアクエリをjQueryで判定することもできます。

JavaScriptのメソッドですが、matchMediaメソッドを使います。

$(function() {
  if (window.matchMedia("(max-width: 768px)").matches) {
    // スマホやタブレット
  } else {
    // PC
  };
});

上記の例では、タブレットの幅に多い768pxで区切って、PCとそれ以外とで分岐処理を行います。

画面のリサイズイベントに合わせて処理

CSSのメディアクエリでは画面がリサイズされると自動でスタイルが変わります。

何らかの理由で、jQuery側でこれを実装する場合、リサイズイベントを検知する必要があります。

$(window).resize(function() {
  if (window.matchMedia("(max-width: 768px)").matches) {
    $('.hoge').css('width', '100%');
  } else {
    $('.hoge').css('width', '300px');
  };
});

上記のコードの例では、リサイズイベントが起きた際に、hogeというクラス名の要素の幅を、デバイスの幅が768px以下であれば100%、769px以上であれば300pxに変えます。