JS:ブラウザサイズを取得する
2011.11.09
最近使うことが多いJSです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。

---- <head></head>内 -----------------------------------------------------

<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);

function resize(){
var w, h;

if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く!
//例)document.getElementById("mainbox").style.width = w - 300 + "px";

}

if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------

上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
(赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます)

他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
| コメント(0)

コメントする

※JavaScriptが有効になっている必要があります




月別アーカイブ