小金井にあるWEB制作会社の備忘録

MEMORANDUM

レスポンシブサイト作成時のjsのブレイクポイント対応

レスポンシブ対応でサイトを制作時に「$(window).width()」や「$(window).innerWidth()」(jQuery)を使い、ブレイクポイントをCSSで設定してるメディアクエリの値と同じにしてしまうと誤差が生じる時があります。
これはCSSとjQueryとでは、スクロールバーの幅に対しての処理が異なり、jQueryではページ幅にスクロールバーの幅は含まないから。
そこで、誤差が生じないための解決方法をメモ。

javascript

if(window.innerWidth < 数値){
	//ここに処理を記載
}

普通のjavasciptを使用することで、CSSのメディアクエリの値と一致します。