かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

jsでブラウザの表示領域を取得するメモ

よく忘れすので。

var w = window;
var d = document;

var width = w.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
var height =  w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;

スクロール領域も含めたい場合は
scrollHeight, scrollWidthも取得して表示領域と比べて大きい方にする

var w = window;
var d = document;

var wWidth = w.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
var wHeight =  w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;

wWidth = Math.max.apply(null, [wWidth, d.documentElement.scrollWidth, d.body.scrollWidth]);
wHeight =  Math.max.apply(null, [wHeight, d.documentElement.scrollHeight, d.body.scrollHeight]);


Math.max.applyで第二引数の配列の中で一番大きい物を返せるってのは調べてて初めて知りました。
Mathオブジェクトのmaxメソッドで、配列最大値を求める! - 燈明日記


windowやdocumentは一度変数にした方がプロパティへのアクセスが高速とか
JavaScript: The Good Partsか何かで読んだ記憶があり変数にするのが癖になっています。
この辺り本当にそうだったかもう一度調べ直しは方が良いっぽい?

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス