Erkennen Sie die Rotation des Android-Telefons im Browser mit JavaScript

Ich weiß, dass Sie in Safari auf einem iPhone die Ausrichtung des Bildschirms und die Änderung der Ausrichtung erkennen können, indem Sie auf das onorientationchangeEreignis warten window.orientationund den Winkel abfragen .

Ist dies im Browser auf Android-Handys möglich?

Um klar zu sein, frage ich, ob die Rotation eines Android-Geräts durch JavaScript erkannt werden kann, das auf einer Standardwebseite ausgeführt wird. Es ist auf einem iPhone möglich, und ich habe mich gefragt, ob dies für Android-Telefone möglich ist.

Um eine Orientierungsänderung in einem Android-Browser zu erkennen, hängen Sie einen Listener an das Ereignis orientationchangeoder resizean 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);

Überprüfen Sie die window.orientationEigenschaft, um herauszufinden, in welche Richtung das Gerät ausgerichtet ist. Mit Android-Handys screen.widthoder screen.heightauch Updates, wenn das Gerät gedreht wird. (Dies ist beim iPhone nicht der Fall).

Das tatsächliche Verhalten zwischen verschiedenen Geräten ist inkonsistent . Die Ereignisse "Größe ändern" und "Ausrichtung ändern" können in einer anderen Reihenfolge mit unterschiedlicher Häufigkeit ausgelöst werden. Außerdem ändern sich einige Werte (z. B. screen.width und window.orientation) nicht immer, wenn Sie dies erwarten. Vermeiden Sie screen.width - es ändert sich nicht, wenn Sie in iOS drehen.

Der zuverlässige Ansatz besteht darin, sowohl Größenänderungs- als auch Orientierungsänderungsereignisse abzuhören (mit einigen Abfragen als Sicherheitsmaßnahme), und Sie erhalten schließlich einen gültigen Wert für die Ausrichtung. Bei meinen Tests können Android-Geräte gelegentlich keine Ereignisse auslösen, wenn sie um volle 180 Grad gedreht werden. Daher habe ich auch ein setInterval eingefügt, um die Ausrichtung abzufragen.

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

Hier sind die Ergebnisse der vier Geräte, die ich getestet habe (Entschuldigung für die ASCII-Tabelle, aber es schien der einfachste Weg zu sein, die Ergebnisse zu präsentieren). Abgesehen von der Konsistenz zwischen den iOS-Geräten gibt es eine große Vielfalt zwischen den Geräten. HINWEIS: Die Ereignisse werden in der Reihenfolge aufgelistet, in der sie ausgelöst wurden.

| ================================================ ============================= |
| Gerät | Ereignisse ausgelöst | Orientierung | innerWidth | screen.width |
| ================================================ ============================= |
| iPad 2 | Größe ändern | 0 | 1024 | 768 |
| (zur Landschaft) | Orientierungswechsel | 90 | 1024 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPad 2 | Größe ändern | 90 | 768 | 768 |
| (zum Porträt) | Orientierungswechsel | 0 | 768 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | Größe ändern | 0 | 480 | 320 |
| (zur Landschaft) | Orientierungswechsel | 90 | 480 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | Größe ändern | 90 | 320 | 320 |
| (zum Porträt) | Orientierungswechsel | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Droid Telefon | Orientierungswechsel | 90 | 320 | 320 |
| (zur Landschaft) | Größe ändern | 90 | 569 | 569 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Droid Telefon | Orientierungswechsel | 0 | 569 | 569 |
| (zum Porträt) | Größe ändern | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | Orientierungswechsel | 0 | 400 | 400 |
| Tablette | Orientierungswechsel | 90 | 400 | 400 |
| (zur Landschaft) | Orientierungswechsel | 90 | 400 | 400 |
| | Größe ändern | 90 | 683 | 683 |
| | Orientierungswechsel | 90 | 683 | 683 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | Orientierungswechsel | 90 | 683 | 683 |
| Tablette | Orientierungswechsel | 0 | 683 | 683 |
| (zum Porträt) | Orientierungswechsel | 0 | 683 | 683 |
| | Größe ändern | 0 | 400 | 400 |
| | Orientierungswechsel | 0 | 400 | 400 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |

Die hervorragende Antwort von Two-Bit-Fool liefert den gesamten Hintergrund, aber lassen Sie mich eine kurze, pragmatische Zusammenfassung des Umgangs mit Orientierungsänderungen unter iOS und Android versuchen :

• Wenn Sie sich nur für Fensterabmessungen interessieren (das typische Szenario) - und nicht für die spezifische Ausrichtung:
  • Behandle nur das resizeEreignis.
  • In Ihrem Handler, wirkt auf window.innerWidthund window.InnerHeightnur.
  • NICHT verwenden window.orientation- es ist unter iOS nicht aktuell.

• Wenn Sie sich für die spezifische Ausrichtung interessieren :
  • Behandeln Sie nur das resizeEreignis unter Android und nur das orientationchangeEreignis unter iOS.
  • Handeln Sie in Ihrem Handler auf window.orientation(und window.innerWidthund window.InnerHeight)

Diese Ansätze bieten geringfügige Vorteile gegenüber dem Erinnern an die vorherige Ausrichtung und dem Vergleichen:

• Der Nur-Dimensionen-Ansatz funktioniert auch bei der Entwicklung in Desktop-Browsern, die ansonsten mobile Geräte simulieren können, z. B. Chrome 23. ( window.orientationist in Desktop-Browsern nicht verfügbar).
• Es ist keine globale / anonyme Variable auf Funktionsebene auf Dateiebene erforderlich.

Sie können das Fenstergrößenänderungsereignis jederzeit anhören. Wenn in diesem Fall das Fenster größer als breit und breiter als hoch wurde (oder umgekehrt), können Sie ziemlich sicher sein, dass die Ausrichtung des Telefons gerade geändert wurde.

Es ist in HTML5 möglich.
Weitere Informationen (und eine Live-Demo) finden Sie hier: http://slides.html5rocks.com/#slide-orientation .

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

Es unterstützt auch Deskop-Browser, gibt jedoch immer den gleichen Wert zurück.

Ich hatte das gleiche Problem. Ich verwende Phonegap und Jquery Mobile für Adroid-Geräte. Um die Größe richtig zu ändern, musste ich eine Zeitüberschreitung festlegen:

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

Hier ist die Lösung:

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

Ein weiteres Problem: Einige Android-Tablets (das Motorola Xoom, von dem ich glaube, und ein Low-End-Elonex-Tablet, an dem ich einige Tests durchführe, wahrscheinlich auch andere) haben ihre Beschleunigungsmesser so eingerichtet, dass window.orientation == 0 im LANDSCAPE-Modus und nicht im Hochformat !

Sie können die Lösung ausprobieren, die mit allen Browsern kompatibel ist.

Das folgende orientationchangeBild zeigt die Kompatibilität: Daher orientaionchangeverfasse ich eine Polyfüllung, die auf dem @ media-Attribut basiert, um die Dienstprogrammbibliothek für den Orientierungswechsel zu reparieren - Orientierungswechsel-Fix

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

Es ist erwähnenswert, dass ich auf meinem Epic 4G Touch die Webansicht für die Verwendung von WebChromeClient einrichten musste, bevor einer der JavaScript-Android-Aufrufe funktionierte.

webView.setWebChromeClient(new WebChromeClient());

Browserübergreifend

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

Ein kleiner Beitrag zur Antwort des Zwei-Bit-Narren:

Wie in der Tabelle auf Droidentelefonen beschrieben, wird das Ereignis "Orientierungsänderung" früher als das Ereignis "Größenänderung" ausgelöst, wodurch der nächste Größenänderungsaufruf blockiert wird (aufgrund der if-Anweisung). Die Width-Eigenschaft ist immer noch nicht festgelegt.

Eine Problemumgehung, die möglicherweise nicht perfekt ist, könnte darin bestehen, das Ereignis "Orientierungswechsel" nicht auszulösen. Dies kann archiviert werden, indem die Ereignisbindung "Orientierungsänderung" in die "if" -Anweisung eingeschlossen wird:

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

Ich hoffe es hilft

(Tests wurden mit Nexus S durchgeführt)