보통은 Rotate라고 부르는 아이폰의 기기를 회전시키는 것은 Orientaion이라고 부르는데 Mobile Safari에서는 Oeientaion에 대한 이벤트를 지원하고 있었고 iPhone OS 1.1.1이후부터 orientationchange라는 이벤트명으로 지원하고 있었습니다.
function updateOrientation()
{
switch(window.orientation)
{
case 0:
alert("0");
break;
case -90:
alert("-90");
break;
case 90:
alert("90");
break;
case 180:
alert("180");
break;
}
}
window.onload = function() {
document.body.onorientationchange = updateOrientation;
}
위와같이 처리하면 orientation에 대한 이벤트를 처리할 수 있습니다. Safari의 레퍼런스문서에서는 <body>태그에 인라인으로 이벤트를 정의했지만 요즘은 보통 이벤트처리를 HTML에서 분리해서 하기 때문에 위와같이 처리했습니다. onload될때 body의 onorientationchange이벤트에 updateOrientation라는 함수를 리스너로 지정해 준것입니다. 이렇게 하면 orientaion의 변화가 있을때마다 함수가 호출되고 window.orientation의 값을 통해 현재 어느정도 회전된 상태인지를 확인할 수 있습니다. onorientationchange는 window에 등록해도 되지만 여기서는 body에 걸었습니다.
레퍼런스 문서에도 세로로 뒤집은 180에 대한 값이 나타나있는데 이상하게 저의 iPod Touch에서는 180에 대한 이벤트는 발생하지 않았습니다.(아이폰에서는 어떤지 잘 모르겠네요.) 실제로도 세로로 뒤집는다고 모바일 사파리가 뒤집어 지지는 않죠.
추가로 테스트를 해보니 넥서스원의 Android 2.1에서는 onorientationchange이벤트가 지원되지 않고 있었습니다. 안드로이드에서는 별수 없이 resize를 사용해야 합니다.
if ("onorientationchange" in window) {
document.body.onorientationchange = updateOrientation;
} else {
window.onresize = updateOrientation;
}
onorientationchange를 검사해서 있으면 사용하고 아니면 resize이벤트로 사용하면 됩니다. 양쪽다 resize로 사용해도 가능하긴 하지만 지원되는 이벤트가 있으면 사용하는게 맞을듯합니다. 그리고 사실 안드로이드에서는 resize에 걸었기 때문에 회전시키지 않아도 중간중간 위의 이벤트가 실행되기는 합니다 ㅡㅡ;;
안녕하세요! 글 읽고 궁금한점이 있어 댓글 남깁니다ㅎㅎ
회전하는 부분은 하드웨어에서 제어하는거라고 하셨는데..
jquery mobile에서 특정 페이지 show 할때 화면을 강제로 회전 시켜버릴수는 없을까요??
기본은 세로 모드였다가 특정 페이지에 진입하면 가로 모드로 보여주고싶습니다..
function getRe(){
var g = window.orientation;
alert(g);
if(g == 90)
{
alert('가로');
}
else if(g == 0)
{
alert('세로');
}
}
window.onorientationchange = function(){
getRe();
}
이렇게 체인지 되는 이벤트를 걸어보긴했는데.. 문제는 여기서 -webkit rotate를 사용해보니..화면 비율이 깨져버리더라구요......
현재는 화면을 돌리거나 해야하는걸로 알고 있는데 이부분은 제어가 만만치 않은 걸로 알고 있습니다. https://www.w3.org/TR/screen-orientation/#examples 가 있긴 한데 현재 지원 상태는 써먹을 수 없는 상태같네요.