JavaScript를 사용하여 Android 브라우저에서 장치 회전을 안정적으로 감지하려면 어떻게 해야 합니까?

JavaScript를 사용하여 Android 브라우저에서 기기 회전 감지

회전 감지 시 호환성 문제

JavaScript를 사용하여 기기 회전 감지 브라우저는 접근 방식이 잘 정의된 iPhone에 비해 Android 휴대폰에서 더 어려울 수 있습니다. Android 기기 전반의 동작은 이벤트의 순서와 빈도가 다양하고 screen.width 및 window.orientation과 같은 값이 변경되어 일관되지 않을 수 있습니다.

회전 감지를 위한 안정적인 접근 방식

이러한 불일치를 해결하려면 resize 및 orientationChange 이벤트를 모두 수신하고 안전 조치로 폴링을 구현하는 것이 좋습니다. 이 접근 방식을 사용하면 최종적으로 유효한 방향 값을 받게 됩니다.

<code class="js">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change as needed
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (Optional) Poll for orientation changes on Android (180 degree turns)
setInterval(checkOrientation, 2000);</code>

이벤트 순서 및 값 변경

이벤트 순서와 값 변경은 상황에 따라 다릅니다. 장치. 다음은 다양한 기기의 결과를 요약한 표입니다.

Device	Events Fired (to Landscape)	orientation	innerWidth	screen.width
iPad 2	resize, orientationchange	90	1024	768
iPhone 4	resize, orientationchange	90	480	320
Droid phone	orientationchange, resize	90	320	569
Samsung Galaxy Tablet	orientationchange, orientationchange, orientationchange, resize, orientationchange	90, 90, 90	400	683

추가 고려 사항

이 접근 방식은 기기 회전을 감지하는 안정적인 방법을 제공하지만 이 맥락에서 JavaScript의 한계를 염두에 두십시오. 예를 들어, screen.width와 같은 특정 값은 항상 예상대로 변경되지 않을 수 있습니다. 또한 iOS 기기 전반에 걸쳐 일관되지 않은 동작으로 인해 screen.width에만 의존하지 않는 것이 좋습니다.

위 내용은 JavaScript를 사용하여 Android 브라우저에서 장치 회전을 안정적으로 감지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!