メニュー

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

MEMORANDUM

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

  • 公開日：2020-11-07
  • 最終更新日：2020-11-23
  • 86

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

javascript

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

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

RANKING

人気記事

同一カテゴリーの記事