JQueryでスクロールバーの有無によるブラウザの幅について

レスポンシブサイト制作時にブラウザの幅によって画面表示を変えることがあります。
一般的にはCSSのメディアクエリ―を使いますが、jQueryも併用して使うことがあります。その際にメディアクエリーで設定した幅とjQueryの幅にずれがある場合があります。
これはjQueryで

var width = $(window).width();

とした場合はスクロールバーを含まない値を取得する為で、もしスクロールバーが表示されていなければ問題ないのですが、スクロールバーが表示された時点でちょっと狭い値になってしまいます。
なので下記のようにすると…

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

こちらの方法ではスクロールバーを含んだ値が取得できます。
後は値を良いように使ってください。

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログ Webサイト構築へ

投稿者: おーあえ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください