jQuery window の幅と高さを正確に出す方法

jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。

何とかなったので、解決方法をφ(..)

jQueryで、ウィンドウ幅と高さを取得するには、

var w = $(window).width();
var h = $(window).height();

こんなかんじですが、一部のブラウザではスクロールバーの有り無しを間違えて、その分を加味した結果を返してくるようです。もしかしたら、もっととんでもないロジックなのかもしれませんが…
そこで、元々のjavascriptが持っているコマンド、innerWidthとinnerHeightを使って値を取得することにすします。

var w = window.innerWidth ? window.innerWidth: $(window).width();
var h = window.innerHeight ? window.innerHeight: $(window).height();

こうすると、リロードしても、ウィンドウ幅の判定に支障がないようです。if文にしたのは値が取れなかった時の保険です。

と、ここまで書いてブラウザでもうまく行ったようなのですが、jQueryの公式ドキュメントを見てみるとちょっと私の理解は違うみたい。

jQuery　.width()

jQuery　.innerWidth()

要素の幅を測定するのが、$().width()で、ボーダーの幅までを測定するのが、$().innerWidth/Height() とのことらしいけれど、ウィンドウとドキュメントのオブジェクトに適用可能ではないようなので、素直にwindow.innerWidth/Heightとしておいたほうがいいのかもしれません…　パディングのデフォルト値をブラウザが持っていて、それをリセット出来ていないと値が変わるという考えがいいのかも？

3つのサンプルはこちら

今の私の環境では全て同じ値でした。まぁウィンドウの高さか幅めいいっぱいに画像をレスポンシブに貼る必要が出てきて、html5 CSS3 は使わずに jQuery でやってみたとき、値が違ったりしたら、確認に使えることを期待して。違う環境に遭遇した時の確認用に晒しておきます。