CSSと同じpx数をブレイクポイントで指定するとjQueryでずれる

CSSで指定したレスポンシブのブレイクポイントに合わせてjQueryで設定をしようとし、そのままの数値を$(window).width()で使うと少しズレがあります。

ずれるのはスクロールバーの幅分

それは$(window).width()でサイズを取得するとスクロールバーを除いた値になるためです。そのため10～20px程度ずれてしまいます。

なのでそれを回避する場合は以下のようにします。

if (window.matchMedia('(min-width: 768px)').matches) {
//処理
}

IE9以下はmatchMediaが使えないため適用は以下になります。IE8はそのままではMedia Queriesは動かないので実質IE9用となりますがCSSを使って

#winMode { display: none; }
@media screen and (min-width: 768px) {
#winMode {
display: block;
}
}

として、jQueryで

if ($('#winMode').css('display') == 'block') {
//処理
}

とします。

これでjQueryの処理がCSSと同じブレイクポイントで動きます。

参考