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 중국어 웹사이트의 기타 관련 기사를 참조하세요!