자바스크립트 모바일 가로 세로 모드 구하기

이번에 다음 지도 API를 이용하여 간단한 프로젝트를 진행하였습니다.

얼마전에 OpenLayers를 이용해서 간단한 프로젝트를 진행했는데 이번건 더욱 간단했습니다.

이번엔 타겟이 모바일 사용자를 위한 프로젝트 였는데요.

모바일 단말기가 현재 가로 모드인지, 세로 모드인지 구별해서 UI를 동적으로 변화시는 부분이 있었습니다.

그래서 오늘은 이부분에 대해서 포스팅 하려 합니다 :)

자바스크립트로 모바일 단말기의 가로, 세로모드 구하기 (가로세로 방향)

예상하신 분들이 이미 계실지 모르겠으나,

가로, 세로를 구분 할 수 있는 정보는 window 객체가 담고있습니다.

프로퍼티 명칭은 orientation 입니다.

사용법은 먼저 jQuery 방식으로 설명드리겠습니다.

$(window).on("orientationchange", function(event){
	if(window.matchMedia("(orientation: portrait)").matches){
		// 세로 모드 (평소 사용하는 각도)
	}else if(window.matchMedia("(orientation: landscape)").matches){
		// 가로 모드 (동영상 볼때 사용하는 각도)
	}
});

보시는 것처럼 방향 전환 이벤트를 감지하여 원하시는 로직을 추가하시면 됩니다.

가로, 세로의 방향은 주석을 참고해 주세요.

만약 jQuery를 사용하지 않는 분이시라면 아래와 같이 사용하시면 됩니다.

var orientation = window.orientation;
if(orientation != undefined){
	if(orientation == 0){
		// 세로 모드 (평소 사용하는 각도)
	}else if(orientation == -90){
		// 가로 모드 (동영상 볼때 사용하는 각도)
	}
}

다만 여기서 참고하셔야 할 점이 한가지 존재합니다.

window.orientation 객체는 모바일에서만 존재합니다.

따라서 orientation 객체에 대해서 null, undefined 검사를 하셔야 하며,

그에 따른 예외처리를 해주셔야 합니다.

그리고 orientation 을 사용하지 않을 경우에 또다른 방법이 있습니다.

window.resize 이벤트가 발생 할 경우,

가로가 세로보다 길면 가로모드,

세로가 가로보다 길면 세로모드

너무 당연한 이야기였나요? ^^;

짧지만 꼭 한번은 사용 할것 같은 포스팅 주제였네요.

도움이 되셨으면 좋겠습니다.

감사합니다.