JavaScript가 브라우저에서 Android 휴대폰 회전을 감지할 수 있나요?

Javascript 기반의 브라우저 내 Android 휴대폰 회전 감지

Apple에서 개발한 Safari 브라우저에서는 OrientationChange 이벤트 관찰 및 평가 창을 통해 화면 방향 변경 모니터링이 가능합니다. .정위. 그런데 Android 기기에서 실행되는 브라우저에서 이러한 기능을 구현할 수 있습니까?

이에 대한 대답은 뉘앙스입니다. 표준 웹 페이지에서 자바스크립트를 실행하면 실제로 Android 기기의 화면 회전을 감지할 수 있습니다. 그러나 동작은 기기와 브라우저에 따라 다릅니다.

도전 과제 및 권장 접근 방식

가장 큰 문제는 Android 기기 전반에서 일관되지 않은 이벤트 발생 동작에 있습니다. resize 및 orientationChange 이벤트는 다양한 빈도로 비동기적으로 실행될 수 있습니다. 이러한 복잡성을 더욱 복잡하게 만드는 것은 screen.width 및 window.orientation과 같은 값이 항상 예측 가능한 결과를 제공하지 않을 수도 있다는 것입니다. 따라서 screen.width에만 의존하는 것은 iOS 회전 중에 변경되지 않은 상태로 유지되므로 권장되지 않습니다.

가장 신뢰할 수 있는 접근 방식은 resize 및 OrientationChange 이벤트를 동시에 수신하는 것입니다. setInterval 함수를 사용하여 정기적인 폴링으로 이를 보완하면 유효한 방향 값을 보장하여 안정성이 향상됩니다.

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Perform operations in response to orientation change
    }
};

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

// Android occasionally fails to trigger events for 180-degree rotations
setInterval(checkOrientation, 2000);</code>

장치별 결과

다음은 전체에서 관찰된 동작에 대한 요약입니다. 다양한 테스트 장치:

Device	Event Sequence	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, orientationchange	90	400	400
Samsung Galaxy Tablet (Portrait)	orientationchange, orientationchange, orientationchange, resize, orientationchange	0	683	683

위 내용은 JavaScript가 브라우저에서 Android 휴대폰 회전을 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!