정말 오랜만의 글이네요.
자바스크립트로 모바일 앱을 개발할 경우 모바일의 회전에 맞춰 인터페이스를 바꿔줘야 하는 경우가 있습니다.
이 경우 'orientationchange'라는 이벤트에 함수를 바인딩하면 모바일 기기가 회전할 때 마다 콜백 함수를 호출받을 수 있습니다.
$(window).bind('orientationchange', updateOrientation);
function updateOrientation() {
orientation = window.innerWidth < window.innerHeight ? 'profile' : 'landscape';
$body.removeClass('profile landscape')
.addClass(orientation)
.trigger('turn', {orientation: orientation});
// scrollTo(0, 0);
}
function updateOrientation() {
orientation = window.innerWidth < window.innerHeight ? 'profile' : 'landscape';
$body.removeClass('profile landscape')
.addClass(orientation)
.trigger('turn', {orientation: orientation});
// scrollTo(0, 0);
}
JQTouch 라이브러리 내에 존재하는 코드 중 하나입니다.
기기 회전 시 HTML의 body에 'landscape'또는 'profile' 클래스를 추가하죠.
하지만 특정 경우(특히 아이패드 환경)에서는 이 'orientationchange' 이벤트가 호출되지 않는다고 합니다.
여러가지 원인이 있는 것 같은데, 아직 확실하게 고쳐지지 않은 것 같네요.
이 경우에는 'orientationChanged'라는 이벤트를 이용해 보세요.
$(window).bind('orientationChanged', updateOrientation);
function updateOrientation() {
orientation = window.innerWidth > window.innerHeight ? 'profile' : 'landscape';
$("ul li textarea").removeClass('profile landscape')
.addClass(orientation)
.trigger('turn', {orientation: orientation});
}
function updateOrientation() {
orientation = window.innerWidth > window.innerHeight ? 'profile' : 'landscape';
$("ul li textarea").removeClass('profile landscape')
.addClass(orientation)
.trigger('turn', {orientation: orientation});
}
단 이 이벤트의 경우 기기가 회전하기 전에 호출되는 것 같더군요.
가령 회전 전 상태가 가로이면, 가로 상태로 함수가 호출되고 이후에 회전을 시작합니다.
왠지 이벤트가 거꾸로 먹는 것 같으면 이 부분을 의심해보세요 ㅎㅎ
- 추가(2010년 9월 16일) -
찾아보니 JQTouch에서 제공하는 'turn'이라는 트리거가 있네요.
(http://wiki.github.com/senchalabs/jQTouch/callbackevents)
위 코드에서도 사용하고 있었는데 전혀 눈치채지 못했네요 ^^;
직접 사용해보진 않았지만 공식 위키에 있는 내용이니 신뢰하셔도 될 것 같습니다.
