Wie erkennt man mithilfe von JavaScript zuverlässig die Rotation von Android-Telefonen in Browsern?

Erkennen der Drehung von Android-Telefonen in Browsern mit JavaScript

In iOS-Browsern können Entwickler die Bildschirmdrehung mithilfe des Ereignisses onorientationchange und der Abfrage von window.orientation erkennen für den Winkel. Kann eine ähnliche Funktionalität auf Android-Smartphones erreicht werden?

Browserverhalten auf Android

Im Gegensatz zu iOS variiert das Verhalten von Bildschirmrotationsereignissen auf Android je nach Gerät. Die Ereignisse „resize“ und „orientationChange“ können in unterschiedlichen Reihenfolgen und Häufigkeiten ausgelöst werden. Darüber hinaus können sich Werte wie screen.width und window.orientation inkonsistent verhalten. Sich ausschließlich auf die Bildschirmbreite zu verlassen, ist besonders unzuverlässig, da sie sich beim Drehen in iOS nicht ändert.

Zuverlässiger Ansatz

Um diese Inkonsistenzen zu beheben, empfiehlt es sich, zuzuhören Sowohl Resize- als auch OrientationChange-Ereignisse, kombiniert mit intermittierender Abfrage. Dies gewährleistet die Erfassung gültiger Orientierungswerte auch in Szenarien, in denen Ereignisse nicht regelmäßig ausgelöst werden.

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

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

// Polling as a safety catch for 180-degree rotations
setInterval(checkOrientation, 2000);

Testergebnisse

Tests auf verschiedenen Android-Geräten ergaben erhebliche Abweichungen:

Device	Events Fired	Orientation	InnerWidth	Screen.width
iPad 2 (Landscape)	Resize OrientationChange	90	1024	768
iPad 2 (Portrait)	Resize OrientationChange	0	768	768
iPhone 4 (Landscape)	Resize OrientationChange	90	480	320
iPhone 4 (Portrait)	Resize OrientationChange	0	320	320
Droid Phone (Landscape)	OrientationChange Resize	90	320	320
Droid Phone (Portrait)	OrientationChange Resize	0	569	569
Samsung Galaxy Tablet (Landscape)	OrientationChange OrientationChange OrientationChange Resize	90	400	400
Samsung Galaxy Tablet (Portrait)	OrientationChange OrientationChange OrientationChange Resize	0	683	683

Das obige ist der detaillierte Inhalt vonWie erkennt man mithilfe von JavaScript zuverlässig die Rotation von Android-Telefonen in Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!