브라우저 크기(너비, 높이) 및 브라우저 화면 사이즈

[head]

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

 

​

[css]

​.point-in { color: red; font-weight:bold; }
.point-out { color: blue; font-weight:bold; }​

 

[javascript]

function funcThisSize() {
    $("#innerWidth").html( window.innerWidth );
    $("#innerHeight").html( window.innerHeight ); $("#outerWidth").html( window.outerWidth );
    $("#outerHeight").html( window.outerHeight );
}

$(function(){
    $(window).resize( funcThisSize );
    funcThisSize();
});

​

[body]

​<div>
    브라우저 화면 크기 : <span id="innerWidth" class="point-in"></span> * <span id="innerHeight" class="point-in"></span>
</div>
<div>
    브라우저 전체 크기 : <span id="outerWidth" class="point-out"></span> * <span id="outerHeight" class="point-out"></span>
</div>​

​

​[설명]

​window.innerWidth : 브라우저 화면의 너비
window.innerHeight : 브라우저 화면의 높이
window.outerWidth : 브라우저 전체의 너비
window.outerHeight : 브라우저 전체의 높이