media query のスクリーン幅と jQuery(window).width() の関係

$(window).width() ではうまくいかない

例えば、

@media screen and (min-width: 1008px) {

のような行が CSS ファイルにあってこのスタイルの切り替えと共に JavaScript コードの動作も切り替えたいとします。そこでそのまま以下のようなコードを書いたとします。

if ($(window).width() >= 1008) {
  // 幅 1008 以上の処理

しかし、これでは CSS のスタイルの切り替えと JavaScript の動作の切り替えのタイミングが一致しません。何故かというと $(window).width() はスクロールバーの幅を減じた値になっているからです。更にいうとスクロールバーの幅はブラウザによって異なるのでどれぐらいの差がでるかはブラウザによって異なってしまいます。さてどうしたものでしょうか？

解決策

解決策として 2つ見つけました。一つ目は以下のように matchMedia を使う方法です。

if (window.matchMedia('(min-width: 1008px)').matches) {
  // 幅 1008 以上の処理

ただし、IE9 以下が対応していないそうです。

もう一つの解法は逆転の発想で media query によって切り替わる属性を用いて判別する方法です。

CSSファイル

#secondary { float: none; }

@media screen and (min-width: 1008px) {
  #secondary {
    float: left;
  }
}

JavaScriptコード

if ($('#secondary').css('float') == 'left') {
  // float = left、すなわち、幅 1008 以上の処理

これらのテクニックを使えばうまく行きそうです。これらは以下の記事を参考としました。

• Using jQuery with CSS Media Queries
• Checking Media Queries With Javascript

最後に宣伝ですが、WordPress プラグインを作ってます。実は今回の記事はこのプラグインの将来の機能改善のために調査したことをまとめたものです。

• Standard Widget Extensions