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

Javascript

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

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

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

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

IE10含む、その他モダンブラウザ

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

IE9以下

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と同じブレイクポイントで動きます。

参考