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

회전 감지 시 호환성 문제

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

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

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

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);

이벤트 순서 및 값 변경

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

추가 고려 사항

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