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

iPhone의 Safari에서는 onorientationchange이벤트 를 듣고 window.orientation각도를 쿼리 하여 화면의 방향과 방향 변경을 감지 할 수 있습니다 .

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

분명히하기 위해 표준 웹 페이지에서 실행 되는 JavaScript 로 Android 장치의 회전을 감지 할 수 있는지 묻습니다 . 아이폰에서 가능하며 안드로이드 폰에서 할 수 있는지 궁금했습니다.

Android 브라우저에서 방향 변경을 감지하려면 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의 경우가 아닙니다).

여러 장치에서 실제 동작이 일치하지 않습니다 . resize 및 orientationChange 이벤트는 다양한 빈도로 다른 순서로 실행될 수 있습니다. 또한 일부 값 (예 : screen.width 및 window.orientation)이 항상 변경되는 것은 아닙니다. screen.width를 피하십시오-iOS 에서 회전 할 때 변경되지 않습니다.

안정적인 접근 방식은 크기 조정 및 orientationChange 이벤트 (안전 폴링으로 일부 폴링 사용)를 수신하는 것이며 결국 방향에 대한 유효한 값을 얻게됩니다. 필자의 테스트에서 안드로이드 장치는 때로는 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);

다음은 내가 테스트 한 4 가지 장치의 결과입니다 (ASCII 테이블에 대해서는 죄송하지만 결과를 표시하는 가장 쉬운 방법 인 것 같습니다). iOS 기기 간의 일관성 외에도 여러 기기에서 다양한 기능이 있습니다. 참고 : 이벤트는 발생한 순서대로 나열됩니다.

| ==================================================== ============================== |
| 장치 | 이벤트 발생 | 오리엔테이션 | innerWidth | screen.width |
| ==================================================== ============================== |
| 아이 패드 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 |
| ---------------- + ------------------- + ------------ -+ ------------ + -------------- |

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

• 창 방향 (일반적인 시나리오) 만 고려하고 특정 방향은 신경 쓰지 않는 경우 :
  • resize이벤트 만 처리하십시오 .
  • 핸들러에 관한 법률 window.innerWidth및 window.InnerHeight단지.
  • 사용하지 마십시오 window.orientation-iOS에서는 최신 상태가 아닙니다.

• 특정 방향에 관심이 있다면 :
  • 핸들 만resize 안드로이드에 대한 이벤트 및 단지orientationchange iOS에서 이벤트를.
  • 핸들러에 관한 법률 window.orientation(와 window.innerWidth와 window.InnerHeight)

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

• 치수 전용 접근 방식은 Chrome 23과 같은 휴대 기기를 시뮬레이션 할 수있는 데스크톱 브라우저에서 개발하는 동안에도 작동합니다 (데스크톱 브라우저에서는 사용할 수 window.orientation없음).
• 전역 / 익명 파일 수준 함수 래퍼 수준 변수가 필요하지 않습니다.

창 크기 조정 이벤트를 항상들을 수 있습니다. 해당 이벤트에서 창이 키가 큰 것보다 키가 큰 것보다 더 큰 것보다 큰 경우 (또는 그 반대로), 전화 방향이 변경되었다는 것을 확신 할 수 있습니다.

HTML5에서 가능합니다. http://slides.html5rocks.com/#slide-orientation
에서 자세한 내용을 읽고 라이브 데모를 시도 하십시오 .

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

또한 Deskop 브라우저를 지원하지만 항상 동일한 값을 반환합니다.

나는 같은 문제가 있었다. Adroid 장치에 Phonegap 및 Jquery mobile을 사용하고 있습니다. 제대로 크기를 조정하려면 시간 초과를 설정해야했습니다.

$(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");
            }   
        });
    }

또 다른 문제-일부 안드로이드 태블릿 (내가 믿는 모토로라 Xoom 및 저급 Elonex 태블릿)은 세로가 아닌 LANDSCAPE 모드에서 window.orientation == 0이되도록 가속도계를 설정했습니다. !

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

orientationchange호환성 그림 은 다음 과 같습니다. 따라서 orientaionchangepolyfill을 작성합니다. 이는 orientationchange 유틸리티 라이브러리를 수정하기위한 @media 속성을 기반으로합니다 —— orientationchange-fix

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

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

webView.setWebChromeClient(new WebChromeClient());

크로스 브라우저 방식

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

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

droid 폰의 테이블에 설명 된대로 "orientationchange"이벤트는 "resize"이벤트보다 먼저 발생하여 다음 ifsize 호출로 인해 다음 크기 조정 호출을 차단합니다. 너비 속성이 여전히 설정되지 않았습니다.

완벽한 해결 방법은 아니지만 "orientationchange"이벤트를 시작하지 않는 것이 좋습니다. "if"문에 "orientationchange"이벤트 바인딩을 래핑하여 보관할 수 있습니다.

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

그것이 도움이되기를 바랍니다.

(Nexus S에서 테스트를 수행함)