Wykryj obrót telefonu z Androidem w przeglądarce za pomocą JavaScript

Rzeczywiste zachowanie różnych urządzeń jest niespójne . Zdarzenia resize i orientationChange mogą wystrzelić w innej kolejności z różną częstotliwością. Również niektóre wartości (np. screen.szerokość i okno.orientacja) nie zawsze zmienia się, kiedy się spodziewasz. unikaj ekranu.Szerokość -- nie zmienia się podczas obracania w systemie iOS.

Niezawodne podejście polega na wysłuchaniu zarówno wydarzeń resize, jak i orientationChange (z niektórymi sondażami jako chwytem bezpieczeństwa), a Ty będziesz ostatecznie uzyskać poprawną wartość dla orientacji. W moich testach urządzenia z Androidem czasami nie uruchamiają zdarzeń podczas obracania o pełne 180 stopni, więc zawarłem również setInterval, aby sprawdzić orientację.

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);

Oto wyniki z czterech urządzeń, które przetestowałem (przepraszam za tabelę ASCII, ale wydawało się to najprostszym sposobem przedstawienia wyników). Oprócz spójności między urządzeniami z systemem iOS istnieje wiele różnych urządzeń. Uwaga: wydarzenia są wymienione w kolejności, w jakiej strzelali.

|==============================================================================|
|     Device     | Events Fired      | orientation | innerWidth | screen.width |
|==============================================================================|
| iPad 2         | resize            | 0           | 1024       | 768          |
| (to landscape) | orientationchange | 90          | 1024       | 768          |
|----------------+-------------------+-------------+------------+--------------|
| iPad 2         | resize            | 90          | 768        | 768          |
| (to portrait)  | orientationchange | 0           | 768        | 768          |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4       | resize            | 0           | 480        | 320          |
| (to landscape) | orientationchange | 90          | 480        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4       | resize            | 90          | 320        | 320          |
| (to portrait)  | orientationchange | 0           | 320        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone    | orientationchange | 90          | 320        | 320          |
| (to landscape) | resize            | 90          | 569        | 569          |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone    | orientationchange | 0           | 569        | 569          |
| (to portrait)  | resize            | 0           | 320        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| Samsung Galaxy | orientationchange | 0           | 400        | 400          |
| Tablet         | orientationchange | 90          | 400        | 400          |
| (to landscape) | orientationchange | 90          | 400        | 400          |
|                | resize            | 90          | 683        | 683          |
|                | orientationchange | 90          | 683        | 683          |
|----------------+-------------------+-------------+------------+--------------|
| Samsung Galaxy | orientationchange | 90          | 683        | 683          |
| Tablet         | orientationchange | 0           | 683        | 683          |
| (to portrait)  | orientationchange | 0           | 683        | 683          |
|                | resize            | 0           | 400        | 400          |
|                | orientationchange | 0           | 400        | 400          |
|----------------+-------------------+-------------+------------+--------------|

Doskonała odpowiedź Two-bit-fool ' s dostarcza całego tła, ale pozwól mi spróbować zwięzłe, pragmatyczne podsumowanie, jak radzić sobie ze zmianami orientacji w systemie iOS i Android : {]}

• Jeśli zależy Ci tylko na wymiarach okna (typowy scenariusz) - a nie na konkretnej orientacji:
  • obsługuje tylko Zdarzenie resize.
  • w Twoim opiekunie działaj tylko na window.innerWidth i window.InnerHeight.
  • nie używaj window.orientation - nie będzie aktualne na iOS.

• Jeśli zależy ci na konkretnej orientacji :
  • obsługuj tylko Zdarzenie resize Na Androidzie, a tylko Zdarzenie orientationchange na iOS.
  • w Twoim opiekunie działaj na window.orientation (oraz window.innerWidth i window.InnerHeight)

Te podejścia oferują niewielkie korzyści w porównaniu z zapamiętywaniem poprzedniej orientacji i porównywaniem:

• podejście tylko do wymiarów działa również podczas opracowywania w przeglądarkach desktopowych, które w inny sposób mogą symulować urządzenia mobilne, np. Chrome 23. ({[3] } nie jest dostępna w przeglądarkach desktopowych).
• nie ma potrzeby stosowania zmiennej global / anonymous-file-level-function-wrapper-level.

Zawsze można posłuchać zdarzenia zmiana rozmiaru okna. Jeśli w tym przypadku okno przeszło z wyższego niż jest szerokie na szersze niż jest wysokie (lub odwrotnie), możesz być całkiem pewien, że orientacja telefonu została właśnie zmieniona.

Jest to możliwe w HTML5.
Możesz przeczytać więcej (i wypróbować demo na żywo) tutaj: http://slides.html5rocks.com/#slide-orientation .

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

Obsługuje również przeglądarki deskop, ale zawsze zwróci tę samą wartość.

Miałem ten sam problem. Używam Phonegap i jQuery mobile, dla urządzeń Adroid. Aby poprawnie zmienić rozmiar musiałem ustawić timeout:

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

Oto rozwiązanie:

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

Kolejna wpadka-niektóre tablety z Androidem (Motorola Xoom jak sądzę i low-endowy Elonex, na którym robię testy, pewnie inne też) mają ustawione akcelerometry tak, że okno.orientacja = = 0 w trybie poziomym, nie pionowym!

Możesz wypróbować rozwiązanie, kompatybilne ze wszystkimi przeglądarkami.

Poniżej znajduje się orientationchange : dlatego jestem autorem orientaionchange polyfill, jest on oparty na atrybucie @ media do fix orientationchange utility library--orientationchange-fix

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

Warto zauważyć, że na moim Epic 4G Touch musiałem skonfigurować webview, aby używać WebChromeClient, zanim którekolwiek z połączeń javascript z Androidem zadziałało.

webView.setWebChromeClient(new WebChromeClient());

Cross browser way

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

Mały wkład w odpowiedź dwu-bitowego głupca:

Jak opisano w tabeli na telefonach droid Zdarzenie" orientationchange "zostanie wywołane wcześniej niż Zdarzenie" resize", blokując tym samym następne wywołanie zmiany rozmiaru (ze względu na polecenie if). Właściwość Width nadal nie jest ustawiona.

Obejściem, choć może nie idealnym, może być nie odpalenie zdarzenia "orientationchange". Można je zarchiwizować, zawijając powiązanie zdarzeń "orientationchange" w instrukcji "if":

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

Hope it pomaga

(testy przeprowadzono na Nexus S)