Orientation Change Event

모바일 브라우저는 데스트탑이나 노트북의 브라우저에 없는 이벤트가 두 가지 있습니다. 바로, 화면 방향 전환 이벤트와 터치 이벤트입니다. 여기서는 화면 방향 전환 이벤트를 알아봅니다. 화면 방향 전환 이벤트의 정식 명칭은 orientationchange 이벤트 입니다. 예제를 만들면서 살펴봅시다. orientationgchange 이벤트는 window 객체에 있는 이벤트입니다. 따라서 아래의 소스 코드처럼 이벤트를 연결합니다. 간단한 이벤트 연결 방식을 지원하지 않으므로 bind() 메서드를 사용해야 합니다.

						$(function(){
							$(window).bind('orientationchange', function () {
								alert(window.orientation);
							})
						});
						

환면 방향 전환과 관련된 가장 중요한 속성은 window 객체의 orientation 속성입니다. 상기 코드에서는 경고창에 이 속성을 출력하게 했습니다. 코드를 스마트폰에서 실행한 후 화면을 회전하면 상태를 표시하는 수치를 볼 수 있습니다. orientation 속성은 화면의 회전각을 의미하며 아래의 네 가지 값으로 화면의 상태를 구분할 수 있습니다.

orientation 속성값에 따른 장치의 상태

orientation 속성값에 따른 장치의 상태
각도 의미
0 수직
90 왼쪽으로 수평
-90 오른쪽으로 수평
180 역 방향으로 수직
							$(function(){
								$(window).bind('orientationchange', function () {
									var output = '
Orientation
'; // 회전 각도에 따라 조건 switch (window.orientation) { case 0: ouput +='
Portrait
' break; case -90: ouput +='
Landscape
' ouput +='
right, screen turned clockwise
' break; case 90: ouput +='
Landscape
' ouput +='
left, screen turned counterclockwise
' break; case 180: ouput +='
Portrait
' ouput +='
upside-down portrait
' break; } // 출력 $("#outputWrap").html(output); }); });