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