2014/05/02

[jQueryMobile] orientationchange 이벤트 활용

//You can add the resize event in the event parameter of the bind function,
//if you're targeting iOS and orientationchange doesn't work.
//Since changing orientation fires the resize event too.
$(window).bind('orientationchange', function(e) {
//    if ("portrait" == $.event.special.orientationchange.orientation()) {
//        //Do whatever in portrait mode
//    } else {
//        //Do Whatever in landscape mode
//    }
    var orientation = window.orientation;
 
    if(90 == orientation || -90 == orientation) {
        //portrait
    } else {
        //landscape
    }
    
    //본문 내에 동적으로 삽입된 테이블의 width를 부모 div의 width로 적용
    $(테이블id).css("width", $(부모 div id).css("width"));
});

[출처] http://stackoverflow.com/questions/10023328/orientation-change-event-implementation-by-jquery-mobile-in-phone-gap

상단 주석 처리된 if문이 있을 때와 현재 적용된 아래 if문을 적용 했을 때 이벤트가 적용되는 시점의 차이가 있었다.
뭐가 다른지 참...
주석 처리된 부분을 적용할 경우 이벤트가 빨리 발생해 아래 css가 적용되는 시점이 실제 가로/세로
기울기 변경이 끝나기 전의 값을 읽어와 적용되는 현상이 발생한 것이다.
하여 구글링해서 현재의 window.orientation 속성을 읽어오는 것으로 기술이 되어 있다.(실제 사용하는 것은 없지만...)

댓글 없음:

댓글 쓰기