画面サイズ・ウインドウサイズのプロパティ取得

画面サイズやウインドウサイズのプロパティ取得

JavaScriptでも画面サイズのプロパティ取得とかウインドウサイズのプロパティ取得が出来る。

function getSize() {
	var prop;
	prop  = "■画面\n\r";
	prop += "幅 screen.width:" + screen.width + "\n\r";
	prop += "高さ screen.height:" + screen.height + "\n\r";

	prop += "■ウインドウ外枠\n\r";
	prop += "幅 window.outerWidth:" + window.outerWidth + "\n\r";
	prop += "高さ window.outerHeight:" + window.outerHeight + "\n\r";

	prop += "■ウインドウ内側(スクロールバー含む)\n\r";
	prop += "幅 window.innerWidth:" + window.innerWidth + "\n\r";
	prop += "高さ window.innerHeight:" + window.innerHeight + "\n\r";

	prop += "■ブラウザでの表示域(スクロールバー除く)\n\r";
	prop += "幅 document.body.clientWidth:" + document.body.clientWidth + "\n\r";
	prop += "高さ document.body.clientHeight:" + document.body.clientHeight + "\n\r";

	prop += "■実際のドッキュメンの大きさ(表示出来ない部分を含む スクロールバー除く)\n\r";
	prop += "幅 document.documentElement.scrollWidth:" + document.documentElement.scrollWidth + "\n\r";
	prop += "高さ document.documentElement.scrollHeight:" + document.documentElement.scrollHeight + "\n\r";
	
  	var obj = document.getElementById("txtResult");
  	obj.value = prop;
}

ちなみに、イラストで解説してるページを見ると、実際の範囲がわかりやすい。

そう言えばこの辺りのプロパティを使った事はないなぁと。入力内容に応じてレイアウトを変えたりという事もあるのかなぁ。単純にCSSだけでは対応出来ない事とか。。。