Geräterotation im Browser auf Android mit JavaScript erkennen

Kompatibilitätsprobleme bei der Rotationserkennung

Geräterotation mit JavaScript in erkennen Der Browser kann auf Android-Telefonen eine größere Herausforderung darstellen als auf iPhones, die über einen klar definierten Ansatz verfügen. Das Verhalten auf Android-Geräten kann inkonsistent sein, mit Variationen in der Reihenfolge und Häufigkeit von Ereignissen und Änderungen in Werten wie screen.width und window.orientation.

Zuverlässiger Ansatz zur Rotationserkennung

Um diese Inkonsistenzen zu beheben, wird empfohlen, sowohl die Größenänderungs- als auch die Ausrichtungsänderungsereignisse abzuhören und als Sicherheitsmaßnahme Abfragen zu implementieren. Dieser Ansatz stellt sicher, dass Sie letztendlich einen gültigen Orientierungswert erhalten.

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change as needed
    }
};

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

// (Optional) Poll for orientation changes on Android (180 degree turns)
setInterval(checkOrientation, 2000);

Ereignissequenzen und Wertänderungen

Die Ereignissequenz und die Werteänderungen variieren je nach Gerät. Hier ist eine Tabelle, die die Ergebnisse verschiedener Geräte zusammenfasst:

Zusätzliche Überlegungen

Dieser Ansatz bietet zwar eine zuverlässige Möglichkeit, die Geräterotation zu erkennen, es ist jedoch wichtig, ihn beizubehalten Beachten Sie in diesem Zusammenhang die Einschränkungen von JavaScript. Beispielsweise ändern sich bestimmte Werte wie „screen.width“ möglicherweise nicht immer wie erwartet. Es wird außerdem empfohlen, sich nicht ausschließlich auf screen.width zu verlassen, da dieses auf allen iOS-Geräten inkonsistent ist.