[jQuery] 화면 (브라우저) 크기 확인, 화면 변경 감지하기

jQuery를 사용하여 현재 브라우저의 화면 해상도를 가져 올 수 있습니다.
$(window).width()를 사용하여 브라우저 창의 너비를 가져올 수 있고, $(window).height()를 사용하여 브라우저 창의 높이를 가져올 수 있습니다. 이렇게 얻은 값은 픽셀 단위로 반환됩니다.

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<script>
$(function(){
	var screenWidth = $(window).width();
	var screenHeight = $(window).height();

	console.log("화면 너비: " + screenWidth);
	console.log("화면 높이: " + screenHeight);

});
</script>

 

예제

1. $(window).width() 로 분기처리 하기

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<script>
$(function(){
    var screenWidth = $(window).width();

    if (screenWidth < 768) {
        // 화면 너비가 768px보다 작을 때 실행할 코드
        console.log("작은 화면");
    } else if (screenWidth >= 768 && screenWidth < 1024) {
        // 화면 너비가 768px 이상이고 1024px보다 작을 때 실행할 코드
        console.log("중간 화면");
    } else {
        // 화면 너비가 1024px 이상일 때 실행할 코드
        console.log("큰 화면");
    }

});
</script>

 

2. 화면 크기에 따라 CSS 수정하기

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<script>
$(window).resize(function() {
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();

    // 요소 위치 조정
    if (screenWidth < 768) {
		console.log("screenWidth < 768");
        $('.element').css('height', '20px');

    } else {
		console.log("screenWidth > 768");
        $('.element').css('height', '200px');
    }
});

</script>
<div class="element" style="width:200px; height:100px; border:1px solid;"></div>

 

3. 스크롤 이벤트 처리

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<script>
$(window).scroll(function() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();

    // 브라우저 창의 높이를 기준으로 스크롤 위치에 따른 동작 처리
    if (scrollTop > windowHeight) {
        // 브라우저 창의 높이보다 스크롤이 더 아래로 내려간 경우에 대한 동작 설정
        console.log("스크롤 다운");
    } else {
        // 브라우저 창의 높이 이하로 스크롤이 위치한 경우에 대한 동작 설정
        console.log("스크롤 업");
    }
});
</script>