이동단 H5 가로 세로 화면 문제

프로젝트의 일부 수요에 따라 가로 화면으로 H5를 전시해야 하지만 자동 가로 화면을 켜는 휴대전화에 대해서는 가로 화면을 돌릴 때 세로 화면을 돌리거나 세로 화면을 가로 화면으로 돌릴 때 페이지 배치가 어지러울 수 있다.
각 휴대전화 설비의 테스트를 통해 아이폰의 반응이 비교적 빠르고 안드로이드가 조금만 느려도 페이지 배치가 어지러운 상황이 나타나지 않기 때문이다.
그래서 아이폰이 가로세로 화면 회전 감청 시 지연 시간을 추가해 어지러운 상황을 해결했다.
다음은 부분 코드입니다. 도움이 되었으면 합니다.
$(function(){//       ,ios   Android      
    onResize();
    if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", onResize, false);
    }else{
        window.addEventListener( "resize", onResize, false);
    }
});

function  onResize() {

    if(Utils.isPortrait()){
        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){

            var timer = setTimeout(function(){
                portrait();//        

                clearTimeout(timer);
            },100);
        }else{
            portrait();
        }
    } else {
        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
            var timer = setTimeout(function(){
                landscape();//        
                clearTimeout(timer);
            },100);
        }else{
            landscape();
        }
    }
}

상세하고 완전한 사례가 필요하면 코드를 참고할 수 있다https://github.com/Aimee1608/qcdq-erhunzi.git

좋은 웹페이지 즐겨찾기