ブラウザ縦横サイズを取得してコンテンツ位置を変えるJavaScript



ブラウザ縦横サイズを取得し、サイズによってコンテンツ位置を変えて見ました。

1.JavaScriptの記述例

<script language="javascript" type="text/javascript">
<!--
function resizeDiv()
{
    var winW = parseInt(document.documentElement.clientWidth);
    var winH = parseInt(document.documentElement.clientHeight);
    if (window.innerWidth){
        winW = parseInt(window.innerWidth);
	}
    if (window.innerHeight){
        winH = parseInt(window.innerHeight);
	}

	if(winH >= 700){
		document.getElementById("idWrap").style.paddingTop = (winH-700) + "px";
	}else{
		document.getElementById("idWrap").style.paddingTop = "0px";
	}

	if(winW >= 800){
		document.getElementById("idWrap").style.paddingLeft = ((winW-800)/2) + "px";
	}else{
		document.getElementById("idWrap").style.paddingLeft = "0px";
	}

}
-->
</script>

clientWidth、innerWidth、clientHeight、innerHeightで表示領域のサイズを取得してます。
今回は上記よりidWrapのpadding位置を変更して見ました。

 

2.CSSの記述例

(以下は調整してみて下さい)

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1em;
	text-align:center;
	padding:15px 0 0 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
ul{
	width:600px;
	margin:0 auto;
}
li{
	line-height:1.4em;
}
-->
</style>

 

3.HTMLの記述例

<body onLoad="resizeDiv();" onResize="resizeDiv();">
	<div id="idWrap">
        <h1>ブラウザの縦横サイズを以下の内容に変更すると、コンテンツの固定位置が変わります。</h1>
        <ul>
        <li>ブラウザの縦サイズを700px以上にすると、伸ばした分だけ上の余白(padding-top)がプラスされます。</li>
        <li>ブラウザの横サイズを800px以上にすると、伸ばした分だけ左の余白(padding-left)がプラスされます。</li>
        </ul>
	</div>
</body>

「body」のonLoadとonResize時にJavaScript処理を行い、
idWrapのpadding位置を変更してます。

 
ブラウザ縦横サイズを取得してコンテンツ位置を変えるデモ
 

jQueryを使用せずにやってみましたが、jQueryって使わなくて出来るんだったら使わなくても大丈夫ですよね。
多分、