Media Queries（メディアクエリ）とJavaScriptの連携について

レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。

そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。
まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。

• NGパターン
  • jQueryのwidthメソッドを使用して判定
• OKパターン
  • window.innerWidthプロパティを使用して判定
  • window.matchMediaメソッドを使用して判定
  • PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定
  • contentの値を使用して判定
  • font-familyの値を使用して判定

NGパターン

まずはやってしまいがちなNGパターンからご紹介します。

jQueryのwidthメソッドを使用して判定

以下のようにjQueryのwidthメソッドを使用して実装をした場合です。

JavaScript

var $win = $(window);

$win.on('load resize', function() {
  var windowWidth = $win.width();

  if (windowWidth > 1024) {
    // PCの処理
  } else if (windowWidth > 768) {
    // TABの処理
  } else {
    // SPの処理
  }
});

この実装がNGな理由はjQueryのwidthメソッドで取得できるウィンドウサイズがスクロールバーの幅を含まない為です。

CSS側のブレイクポイントはスクロールバーの幅を含んだウィンドウサイズで切り替わるため、CSS側のブレイクポイントの切替とJS側の処理の切替にズレが発生し、CSSはTABのレイアウトになったのにJSはSPの動作をしてしまうといった事が起きてしまいます。

サンプル

Macだとスクロールバーが幅を持たないデザインとなっており問題が発生しないので、WindowsのIEのように常にスクロールバーが出るブラウザで見てみて下さい。ブレイクポイント付近でウィンドウサイズを変更しているとJS側とCSS側でスクロールバーの幅分判定がズレてしまうことが確認できるかと思います。

OKパターン

次に各種OKパターンをそれぞれメリット/デメリットを混じえつつご紹介します。

window.innerWidthプロパティを使用して判定

window.innerWidthプロパティを使用するとスクロールバー幅を含んだウィンドウサイズが取得できるため、JS側とCSS側で差異のでない、期待取りの動作をさせる事ができます。

JavaScript

var $win = $(window);

$win.on('load resize', function() {
  var windowWidth = window.innerWidth;

  if (windowWidth > 1024) {
    // PCの処理
  } else if (windowWidth > 768) {
    // TABの処理
  } else {
    // SPの処理
  }
});

サンプル

メリット

• スクロールバーの幅に影響を受けずに期待通りの動作をする事ができる。
• 安定して無難に判定が行える。

デメリット

• もしCSS側でブレイクポイントを変更する場合、JSのソースコード側の判定幅の数値も合わせて変更する必要があるため、若干保守性が劣る。
  ※例えばCSSに記述しているブレイクポイントを1024pxから1200pxに変更した場合、JS側の判定式も合わせて1024から1200に変更する必要が発生する。
• IE8以下では使用できない

window.matchMediaメソッドを使用して判定

モダンブラウザやIE10以上のブラウザではwindow.matchMediaというメソッドが使用可能で、これを使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。

JavaScript

var $win = $(window);

$win.on('load resize', function() {  
  if (window.matchMedia('(max-width:480px)').matches) {
    // SPの処理
  } else if (window.matchMedia('(max-width:768px)').matches) {
    // TABの処理
  } else {
    // PCの処理
  }
});

サンプル

メリット

• window.innerWidthを使用した場合と同じく期待通りの動作をする事ができる。
• さらにCSS側と同じような記述ができる為、直感的に分かりやすい。

デメリット

• デメリットもwindow.innerWidthを使用した場合と同じくCSS側のブレイクポイントを変更する場合、JS側も合わせて変更する必要がある。
• IE9以下では使用できない

PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定

PCでは表示しない要素に.pc-dn（名前は何でも良いです）というPCでdisplay: none;となるclassを付与し、SPでは表示しない要素に.sp-dn（こちらも名前は何でも良いです）というclassを付与してページを制作する場合に、JS側から.pc-dnが付与されている要素、もしくは.sp-dnが付与されている要素の状態を取得して現在のレイアウトを判定する方法。

HTML

<div class="jsc-pc-dn pc-dn">
  // PCでは表示しない要素
</div>
<div class="jsc-sp-dn sp-dn">
  // SPでは表示しない要素
</div>

CSS

/* PCレイアウト用 */
.pc-dn {
  display: none;
}
.sp-dn {
  display: block;
}

/* SPレイアウト用 */
@media screen and (max-width: 768px) {
  .pc-dn {
    display: block;
  }
  .sp-dn {
    display: none;
  }
}

JavaScript

var $win = $(window),
    $spDn = $('.jsc-sp-dn');

$win.on('load resize', function() {
  if ($spDn.is(':visible')) {
    // PCの処理
  } else {
    // SPの処理
  }
});

サンプル

メリット

• CSS側のブレイクポイントを変更しても、JS側は特に変更を加える必要がない。

デメリット

• 表示/非表示の2択で判定を行うため、PC/SP以外にTAB等のレイアウトが入ってきた場合判定ができなくなる。
• .pc-dnを付与していてSPではdisplay: block;になるハズなのだが、何かのミスでdisplay: none !important;等で上書きされてしまうと誤判定を起こす。
• .is(':visible')で判定する場合、.pc-dnを付与している要素がSPで正しくdisplay: block;になっていたとしても、.pc-dnを付与している要素の親要素がdisplay: none;になっていると要素としてはdisplay: block;なのだがブラウザ上の表示は非表示という状態になり、誤判定を起こす。

contentの値を使用して判定

contentの値に任意の文字列を入れられることを利用します。
※ただしIE、edgeでは使用できません。
※Mac Safariとその他モダンブラウザで文字列を取得した際に「"」が含まれるかどうかの差がある為、「"」を除去しつつ値を取得する必要があります。

HTML

<!-- ページ内のどこかに空タグで良いので配置しておく -->
<div class="jsc-media-queries media-queries"></div>

CSS

/* PC用 */
.media-queries {
  display: none;
  content: 'pc';
}

/* TAB用 */
@media screen and (max-width: 768px) {
  .media-queries {
    content: 'tab';
  }
}

/* SP用 */
@media screen and (max-width: 480px) {
  .media-queries {
    content: 'sp';
  }
}

JavaScript

var $win = $(window),
    $mediaQueries = $('.jsc-media-queries');

$win.on('load resize', function() {
  // Mac Safariでは「pc」という文字列が取得できるが、
  // その他モダンブラウザでは「"pc"」となってしまうため、「"」を除去しつつ取得する。
  var layout = $mediaQueries.css('content').replace(/"/g, '');

  if (layout === 'pc') {
    // PCの処理
  } else if (layout === 'tab') {
    // TABの処理
  } else {
    // SPの処理
  }
});

サンプル

メリット

• （デメリットで後述しますがIEとedge以外では）期待通りの動作をする。
• JS側での判定文に「pc」や「sp」といった文字列を使用できるため、コメント文が無くてもコードだけでどのレイアウトの判定なのかを理解できる。
• また、CSS側のブレイクポイントを変更してもJS側は特に修正が不要。

デメリット

• IEだと取得できる値が常に「normal」という文字列に、edgeでは何も取得できない為、IEとedgeではレイアウトの判定ができない。

※PCで閲覧する分にはレスポンシブになっている必要が無い案件もあると思いますので、その場合はもちろん問題ありません。

font-familyの値を使用して判定

font-familyの値に任意の文字列が入れられることを利用します。
※モダンブラウザとIEで文字列を取得した際に「"」が含まれるかどうかの差がある為、「"」を除去しつつ値を取得する必要があります。

HTML

<!-- ページ内のどこかに空タグで良いので配置しておく -->
<div class="jsc-media-queries media-queries"></div>

CSS

/* PC用 */
.media-queries {
  display: none;
  font-family: 'pc';
}

/* TAB用 */
@media screen and (max-width: 768px) {
  .media-queries {
    font-family: 'tab';
  }
}

/* SP用 */
@media screen and (max-width: 480px) {
  .media-queries {
    font-family: 'sp';
  }
}

JavaScript

var $win = $(window),
    $mediaQueries = $('.jsc-media-queries');

$win.on('load resize', function() {
  // モダンブラウザでは「pc」という文字列が取得できるが、
  // IEでは「"pc"」と「"」が付与されて取得されてしまうため「"」を除去しつつ取得する。
  var layout = $mediaQueries.css('font-family').replace(/"/g, '');

  if (layout === 'pc') {
    // PCの処理
  } else if (layout === 'tab') {
    // TABの処理
  } else {
    // SPの処理
  }
});

サンプル

メリット

• IEやedgeも含めたあらゆる条件で期待通りの動作をする。
• JS側での判定文に「pc」や「sp」といった文字列を使用できるため、コメント文が無くてもコードだけでどのレイアウトの判定なのかを理解できる。
• また、CSS側のブレイクポイントを変更してもJS側は特に修正が不要。

デメリット

• font-familyの本来の使い方ではないので実装が超気持ち悪い。

まとめ

様々な方法をメリット/デメリットと共にご紹介しましたが、メリット/デメリットを踏まえた上で案件にあったものを上手く使っていけば良いと思います。