[jQuery/JavaScript] 화면 사이즈 구하기, 화면 사이즈 변화 감지

jQuery로 화면 사이즈를 구해야 할 일은 많습니다.

 

특히 모바일은 디바이스가 워낙 다양해서 한 페이지가 디스플레이 크기에 따라서 변화하는 식으로 반응형 디자인을 하고, 그 것이 실제로 디바이스 크기에 반응하도록 하는 CSS 기능 중에 미디어 쿼리라는 기능이 있습니다.

 

자바스크립트로도 미디어 쿼리 처럼 화면 사이즈 별로 실행해야할 행위가 다를 경우에 할 수 있는 방법이 있습니다.

 

물론 jQuery로 하면 더 간단한 문법으로 적용할 수 있겠죠.

 

 

그래서 이번 포스팅에서는 jQuery로 화면 사이즈를 구하고 화면 사이즈에 따른 코드를 분기 해보겠습니다.

 

function open_chatroom(){
var windowWidth = $( window ).width();
if(windowWidth < 500) {
//창 가로 크기가 500 미만일 경우
} else {
//창 가로 크기가 500보다 클 경우
}
}

 

open_chatroom() 이란 함수는 제가 실무에서 실제로 쓰고 있는 코드의 일부를 가져 온 것입니다.

이 함수의 사용 용도는 이미 미디어 쿼리로 나뉘어져 있는 화면이 있는데, 화면 크기에 따라 채팅방을 열때 처리 해야할 코드가 달라서 쓴 코드 입니다.

 

예를 들어 모바일에서 채팅방을 클릭 할 경우엔 카카오톡 채팅이 열리고, 데스크탑에서 채팅방을 클릭할 경우엔 자체 웹 채팅이 열리게 되도록 말이죠.

 

레이아웃이나 스타일 같은 경우는 그냥 미디어 쿼리로 CSS로 통일 시키는게 좋겠지만 그렇지 않고 링크 주소를 바꾼다거나 HTML 자체를 수정해버린다거나 띄우는 팝업을 다르게 한다던가 하는 동작에 관한 것은 위와 같이 jQuery로 분기할 수 있습니다.

 

 

하지만 모든 코드엔 예외가 있기 마련!

 

그럴리는 없지만 만약 모바일 기기가 아닌 데스크탑에서 데스크탑용 채팅창이 열린 상태에서 창 크기를 줄여버린다면 어떻게 해야할까요?

애초에 데스크탑용 모니터 크기로 인식하고 PC용 채팅창을 열어놓은 상태이기 때문에 거기서 새로고침 하지 않고 그냥 사이즈를 줄여버리면 모바일 사이즈에서 데스크탑용 채팅 창이 그대로 보일겁니다. 

 

이런 경우에 화면 사이즈가 줄어들고 있음을 계속 감지해서 일정 이하 사이즈가 되었을 때 데스크탑용 채팅창이 닫히게 하고 모바일 채팅창이 열려야 겠죠?

 

물론 CSS 미디어 쿼리로도 가능하지만 스크립트로도 가능합니다.

 

때론 스크립트가 미디어 쿼리보다 편할 때도 많으니 참고해보세요~

 

$( window ).resize(function() {
   //창크기 변화 감지
});

 

이렇게 jQuery의 window.resize()를 이용하면 창크기의 변화를 감지할 수 있습니다. 윈도우의 사이즈 변화를 감지하는 이벤트 리스너가 등록되게 되고 화면이 줄여지거나 늘어날때 마다 function이 실행되게 됩니다. 

 

제가 보여드렸던 예제에서 예를 든다면 resize()의 function 안에 open_chatroom() 처럼 500미만일 경우의 처리를 하면 되겠죠~

 

항상 프로그램에는 예외가 있기 때문에 이런 예외들을 잘 생각하는게 제일 중요한 것 같아요~

외주개발을 해도 예외처리를 잘 못해서 유지보수할 것들이 많아지면 힘든건 본인일 테니까요.. (경험자임에도 항상 실수하는 부분은 넘쳐납니다..)

 

 

 

아무튼 모두 열공! 하고 프로그래밍적 사고력을 키워서 애초에 설계부터 잘하는 것이 제일 이상적이겠죠! 이상입니다!