JavaScript를 사용하여 브라우저에서 Android 휴대폰 회전을 안정적으로 감지하는 방법은 무엇입니까?

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

iOS 브라우저에서 개발자는 onorientationchange 이벤트를 사용하고 window.orientation을 쿼리하여 화면 회전을 감지할 수 있습니다. 각도를 위해. Android 스마트폰에서도 비슷한 기능을 구현할 수 있나요?

Android의 브라우저 동작

iOS와 달리 Android의 화면 회전 이벤트 동작은 기기마다 다릅니다. resize 및 orientationChange 이벤트는 다양한 순서와 빈도로 실행될 수 있습니다. 또한 screen.width 및 window.orientation과 같은 값은 일관되지 않게 동작할 수 있습니다. screen.width에만 의존하는 것은 iOS에서 회전할 때 변경되지 않기 때문에 특히 신뢰할 수 없습니다.

신뢰할 수 있는 접근 방식

이러한 불일치를 해결하려면 다음을 듣는 것이 좋습니다. 간헐적 폴링과 결합된 크기 조정 및 방향 변경 이벤트. 이를 통해 이벤트가 일관되게 실행되지 않는 시나리오에서도 유효한 방향 값을 캡처할 수 있습니다.

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change
    }
};

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

// Polling as a safety catch for 180-degree rotations
setInterval(checkOrientation, 2000);

테스트 결과

다양한 Android 기기에서 테스트한 결과 상당한 변화가 나타났습니다.

Device	Events Fired	Orientation	InnerWidth	Screen.width
iPad 2 (Landscape)	Resize OrientationChange	90	1024	768
iPad 2 (Portrait)	Resize OrientationChange	0	768	768
iPhone 4 (Landscape)	Resize OrientationChange	90	480	320
iPhone 4 (Portrait)	Resize OrientationChange	0	320	320
Droid Phone (Landscape)	OrientationChange Resize	90	320	320
Droid Phone (Portrait)	OrientationChange Resize	0	569	569
Samsung Galaxy Tablet (Landscape)	OrientationChange OrientationChange OrientationChange Resize	90	400	400
Samsung Galaxy Tablet (Portrait)	OrientationChange OrientationChange OrientationChange Resize	0	683	683

위 내용은 JavaScript를 사용하여 브라우저에서 Android 휴대폰 회전을 안정적으로 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!