ウインドウのサイズを取得する

ウインドウサイズを取得するため、window.documentオブジェクトのプロパティを参照する。
ブラウザの動作モードによって、参照するプロパティを変更する。
動作モードはdocument.compatModeで取得するが、CSS1Compatは標準準拠モードを表す。

//ウインドウサイズを取得する
function getWindowSize(){
    var width = 0, height = 0;
    var availWidth = 0, availHeight = 0;

    if(document.compatMode == "CSS1Compat"){
        width = document.documentElement.scrollWidth;
        height = document.documentElement.scrollHeight;
        availWidth = document.documentElement.clientWidth;
        if(navigator.userAgent.match(/opera/i)){
            availHeight = window.innerHeight;
        }else{
            availHeight = document.documentElement.clientHeight;
        }
    }else{ //過去互換モード
        width = document.body.scrollWidth;
        height = document.body.scrollHeight;
        availWidth = document.body.clientWidth;
        if(navigator.userAgent.match(/opera/i)){
            availHeight = document.body.offsetHeight;
        }else{
            availHeight = document.body.clientHeight;
        }
    }

    var windowSize = {
        width: width,
        height: height,
        availWidth: availWidth,
        availHeight: availHeight
    }
    return windowSize;
}

//ウインドウサイズを出力する
function writeWindowSize(){
    var windowSize = getWindowSize();

    document.getElementById("windowWidth").innerHTML = windowSize.width + "px";
    document.getElementById("windowHeight").innerHTML = windowSize.height + "px";
    document.getElementById("windowAvailWidth").innerHTML = windowSize.availWidth + "px";
    document.getElementById("windowAvailHeight").innerHTML = windowSize.availHeight + "px";
}