中学受験専門 理科総合研究所 −理総研−

フロントページへ
Name:
Pass:
RSS
: ユーザー登録はコチラ :
左 理総研:技術情報と開発メモ 右

003:ウィンドウ作業領域の縦横サイズを測る

対象言語:JavaScript
キーワード:JavaScript 縦 横 サイズ px 固定 ブラウザ ウィンドウ 作業領域 調べる onload() onResize()
主要5ブラウザ(こちらの環境では IE8.0 / Chrome10 / Safari5.0 / FireFox5 / Opera11.0 )に限定するなら、
::document.documentElement.clientHeight
::document.documentElement.clientWidth
で御希望の値がとれます。理総研では、常にウィンドウ左・縦100%で固定されるINDEXと、常にウィンドウ下・センターに固定されるMENUに利用しています。 スクロールしても画面サイズを変更しても、彼らは常にこの条件を満たしてくれていることが確認できると思います。
  • HTML部分
	<body onload="windowOp();" onresize="windowOp();">
	<!--- ページを読み込むとき、またはページにサイズ変更があったときに呼び出します、と。 --->
  • Javascript部分

function windowOp(){

	var h;
	var w;

	if (document.documentElement.clientHeight) {

		h = document.documentElement.clientHeight;
		w = document.documentElement.clientWidth;

		/*
		一応はこれで、上記のブラウザバージョンなら同じ挙動となります。
		非対応ブラウザは以下のように対策しておけば何とかなるかな。
		*/

	} else if (window.innerWidth) {

		h = window.innerHeight;
		w = window.innerWidth;

	} else {

		h = document.body.clientHeight;
		w = document.body.clientWidth;

	}

	document.getElementById("id").style.height = h + "px";

	//ピクセル指定しないとChromeやFireFoxでは動かない。

}
著者 You Mizuguchi
© 2011 System-iDO IT Devisers