JavaScript로 브라우저에서 Android 전화기 회전 감지

JavaScript로 브라우저에서 Android 전화기 회전 감지

에서는 iPhone의 Safari를 할 수 .onorientationchange 및 " " " 를 사용합니다.window.orientation각도에 대하여

안드로이드 폰의 브라우저에서 이것이 가능합니까?

분명히 말씀드리자면, 안드로이드 기기의 회전을 표준 웹 페이지에서 실행되는 자바스크립트로 감지할 수 있는지 문의드립니다.아이폰에서도 가능한데, 안드로이드폰에서도 가능한지 궁금합니다.

여러 장치에서 실제 동작이 일관되지 않습니다.크기 조정 및 방향 변경 이벤트는 다양한 빈도로 다른 순서로 실행될 수 있습니다.또한 일부 값(예: 화면).width and window.orientation)는 항상 예상할 때 변경되지 않습니다.화면을 피합니다.width -- iOS에서 회전할 때 변경되지 않습니다.

신뢰할 수 있는 접근 방식은 크기 조정 및 방향 변경 이벤트(일부 폴링을 안전 캐치로 사용)를 모두 청취하는 것이며, 최종적으로 방향에 대한 유효한 값을 얻을 수 있습니다.테스트에서 Android 장치가 180도 회전할 때 이벤트가 발생하지 않는 경우가 있으므로 방향을 폴링하기 위한 setInterval도 포함했습니다.

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

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

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);

다음은 제가 테스트한 네 가지 장치의 결과입니다(ASCII 테이블은 죄송하지만 결과를 가장 쉽게 제시할 수 있는 방법인 것 같습니다).iOS 기기 간의 일관성 외에도 기기마다 다양성이 있습니다.참고: 이벤트는 발생한 순서대로 나열됩니다.

|==============================================================================|Device | Events Fireed | Orientation | innerWidth | 화면.폭 ||==============================================================================|아이패드 2 | 크기 조정 | 0 | 1024 | 768 |(가로) | 방향 변경 | 90 | 1024 | 768 ||----------------+-------------------+-------------+------------+--------------|아이패드 2 | 크기 조정 | 90 | 768 | 768 |(세로로) | 방향 변경 | 0 | 768 |768          ||----------------+-------------------+-------------+------------+--------------|아이폰 4 | 크기 조정 | 0 | 480 | 320 |(가로) | 방향 변경 | 90 | 480 | 320 ||----------------+-------------------+-------------+------------+--------------|아이폰 4 | 크기 조정 | 90 | 320 | 320 |(세로로) | 방향 변경 | 0 | 320 | 320          ||----------------+-------------------+-------------+------------+--------------|드로이드 폰 | 방향 변경 | 90 | 320 | 320 |(가로) | 크기 조정 | 90 | 569 | 569 ||----------------+-------------------+-------------+------------+--------------|드로이드 폰 | 방향 변경 | 0 | 569 | 569 |(세로로) | 크기 조정 | 0 | 320        | 320          ||----------------+-------------------+-------------+------------+--------------|삼성 갤럭시 | 오리엔테이션 변경 | 0 | 400 | 400 |태블릿 | 방향 변경 | 90 | 400 | 400 |(가로) | 방향 변경 | 90 | 400 | 400 || 크기 조정 | 90 | 683 | 683 || 방향 변경 | 90 | 683 | 683 ||----------------+-------------------+-------------+------------+--------------|삼성 갤럭시 | 오리엔테이션 변경 | 90 | 683 | 683 |태블릿 | 방향 변경 | 0 | 683 | 683 |(세로로) | 방향 변경 | 0 | 683 | 683 || 크기 조정 | 0 | 400 | 400 || 방향 변경 | 0 | 400 | 400 ||----------------+-------------------+-------------+------------+--------------|

에 수신기를 연결합니다.orientationchange또는resize에 관한 사건.window:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

항목을 합니다.window.orientation속성을 사용하여 장치의 방향을 파악할 수 있습니다.Android 폰을 사용하면,screen.width또는screen.height(iPhone에서는 그렇지 않습니다.)

Two-bit-fool의 훌륭한 답변은 모든 배경을 제공하지만 iOS와 Android에서 방향 변경을 처리하는 방법에 대한 간결하고 실용적인 요약을 시도해 보겠습니다.

• 창 치수(일반 시나리오)에만 관심이 있고 특정 방향에는 관심이 없는 경우:
  • 를 합니다.resize이벤트 전용입니다.
  • 에서, 작업서에기에 대해 하세요.window.innerWidth그리고.window.InnerHeight 직오직.
  • 을 사용하지 .window.orientation 버전이. iOS에서는 최신 버전이 아닙니다.

• 특정 방향에 관심이 있는 경우:
  • 다음 항목만 처리합니다.resizeAndroid에서 이벤트, 그리고 오직.orientationchangei의 OS에서 이벤트.
  • 에서, 작업서에기에 대해 하세요.window.orientation)window.innerWidth그리고.window.InnerHeight)

이러한 접근 방식은 이전 방향을 기억하고 비교하는 것에 비해 약간의 이점을 제공합니다.

• 할 수 데스크톱 (예: Chrome 23)에서도window.orientation데스크톱 브라우저에서는 사용할 수 없습니다.
• 글로벌/임시 파일 수준-함수 수준-수준 변수가 필요하지 않습니다.

창 크기 조정 이벤트를 언제든지 들을 수 있습니다.이 경우 창이 너비보다 높거나 높이보다 넓거나(또는 그 반대의 경우) 전화기 방향이 변경되었음을 확신할 수 있습니다.

HTML5에서 가능합니다.
자세한 내용은 여기에서 확인하실 수 있습니다. http://slides.html5rocks.com/ #http://field-orientation.

window.addEventListener('deviceorientation', function(event) {
    var a = event.alpha;
    var b = event.beta;
    var g = event.gamma;
}, false);

데스크톱 브라우저도 지원하지만 항상 동일한 값을 반환합니다.

저도 같은 문제가 있었습니다.저는 폰갭과 제이쿼리 모바일을 사용하고 있습니다.크기를 적절하게 조정하려면 시간 초과를 설정해야 했습니다.

$(window).bind('orientationchange',function(e) {
  fixOrientation();
});

$(window).bind('resize',function(e) {
  fixOrientation();
});

function fixOrientation() {

    setTimeout(function() {

        var windowWidth = window.innerWidth;

        $('div[data-role="page"]').width(windowWidth);
        $('div[data-role="header"]').width(windowWidth);
        $('div[data-role="content"]').width(windowWidth-30);
        $('div[data-role="footer"]').width(windowWidth);

    },500);
}

솔루션은 다음과 같습니다.

var isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent);
    },
    iOS: function() {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
};
if(isMobile.Android())
    {
        var previousWidth=$(window).width();
        $(window).on({
        resize: function(e) {
        var YourFunction=(function(){

            var screenWidth=$(window).width();
            if(previousWidth!=screenWidth)
            {
                previousWidth=screenWidth;
                alert("oreientation changed");
            }

        })();

        }
    });

    }
    else//mainly for ios
    {
        $(window).on({
            orientationchange: function(e) {
               alert("orientation changed");
            }   
        });
    }

모든 브라우저와 호환되는 솔루션을 사용해 볼 수 있습니다.

은 다은음입니다.orientationchange호환성 사진: 그러므로, 나는 a를 작성합니다.orientaionchangepolyfill, 방향 변경 유틸리티 라이브러리——방향 변경 수정을 위한 @media 속성을 기반으로 합니다.

window.addEventListener('orientationchange', function(){
 if(window.neworientation.current === 'portrait|landscape'){
    // do something……
 } else {
    // do something……
 }
}, false);

또 다른 예로는 일부 Android 태블릿(Motorola Xoom과 테스트 중인 저가형 Elonex 태블릿)에 가속도계가 설정되어 있습니다. 방향 == 0은 세로가 아닌 가로 모드입니다!

내 Epic 4G Touch에서 Javascript Android 호출이 작동하기 전에 WebChromeClient를 사용하도록 웹 뷰를 설정해야 했습니다.

webView.setWebChromeClient(new WebChromeClient());

크로스 브라우저 방식

$(window).on('resize orientationchange webkitfullscreenchange mozfullscreenchange fullscreenchange',  function(){
//code here
});

두 비트 바보의 대답에 약간의 기여:

Droid 전화기의 표에 설명된 대로 "방향 변경" 이벤트는 "크기 조정" 이벤트보다 먼저 실행되어 다음 크기 조정 호출을 차단합니다(if 문 때문).너비 속성이 아직 설정되지 않았습니다.

완벽하지는 않지만 해결 방법은 "방향 변경" 이벤트를 발생시키지 않는 것입니다.이는 "방향 변경" 이벤트 바인딩을 "if" 문으로 래핑하여 보관할 수 있습니다.

if (!navigator.userAgent.match(/android/i))
{
    window.addEventListener("orientationchange", checkOrientation, false);
}

도움이 되길 바랍니다.

(Nexus S에서 테스트 수행)

언급URL : https://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript