web関連

jQueryでウィンドウサイズが上手く取得できない件

jQueryでウィンドウサイズが上手く取得できない件

jsファイルでウィンドウサイズで条件分岐を書いた時に起きました。
実際に取得してconsole.logとかで確認をしてみたら幅を17px分小さく取得しており、そのせいでサイトの表示がおかしい幅ができてしまったので備忘録

原因

サイトの右側に表示されるスクロールバー分が取得できていなかった…
以下(失敗例)のような書き方だとスクロールバーの幅を除いたウィンドウサイズを取得する。

//上手くいかなかった
$(function(){
var windowWidth = $(window).width();
alert(windowWidth);//スクロールバーを除いたウィンドウサイズを取得
});
【メモ】「.width()」はjQueryのメソッドだから、jQueryを読み込んでいないと使えない

修正後

javascriptの.innerWidthを使えば、スクロールバーを含めたウィンドウサイズを取得できる

//上手くいった
$(function(){
var windowWidth = window.innerWidth;
alert(windowWidth);//スクロールバーを含んだウィンドウサイズを取得
});

補足

jQueryの「.innerWidth()」とjavascriptの「.innerWidth」は仕様が異なる

jQuery「.innerWidth()」
paddingを含めた横幅を取得(marginは含めない)
javascript「.innerWidth」
スクロールバーを含めた横幅を取得

だからjQueryの「.innerWidth()」を使うと、スクロールバーの幅は取得できない。

javascriptとjQueryって個人的には別物のイメージがあったから、ごっちゃにされると頭がこんがらがる… 勉強せねば…