JavaScript で画面サイズ・モニタサイズ・ブラウザサイズ・スクロールの限界

JS でモニタサイズやウインドウサイズを計算する

モニタサイズ

window.screenで取ることが出来る

(x, y) = (screen.width,screen.height)

window.outerXXでも取ることが出来る

x = window.outerHeight
y = window.outerWidth

ブラウザのWindowサイズ

window.innerXXXで取ることが出来る。

window.innerHeight
window.innerWidth

HTMLのページサイズ（描画しているページの縦横幅

document.documentElement.clientWidth
document.documentElement.clientHeight

ただし、これはビューポートの長さ。

Documentの縦横幅 スクロール可能量も含めたhtml描画の高さ

window.document.documentElement.scrollHeight
window.document.documentElement.scrollWidth

某クエリ言語中毒患者のために

$(document.body).css("width") ///これは　window.innerWidthとおなじ。

もう少しサイズについて調べる

iPhoneの場合。

{"window.outerWidth":window.outerWidth , "window.innerWidth":window.innerWidth} 
//=>{"window.outerWidth":320,"window.innerWidth":1024}

a = {"window.outerWidth":window.outerWidth , "window.innerWidth":window.innerWidth}
Object {window.outerWidth: 1680, window.innerWidth: 1048}

ま、過信しないことですね。

スクロール高さについて

Ajaxで読み込まれた要素を、子要素に持つ親要素はレンダリング時の高さと、スクロール可能な高さが異なることが多くとても苦労する。

window.document.documentElement.clientHeight
//=>964
window.document.documentElement.scrollHeight
//=>7323
window.document.querySelector('#wrapper').clientHeight
//=> 6830

これは何なんだろっていつも思います。

2018-01-31 追記

スクロール時の高さについて。