Kann JavaScript die Rotation von Android-Telefonen in Browsern erkennen?

Javascript-basierte Erkennung der Rotation von Android-Telefonen in Browsern

In von Apple entwickelten Safari-Browsern ist die Überwachung von Änderungen der Bildschirmausrichtung durch Beobachtung des Ereignisses „orientationChange“ und Auswertung des Fensters möglich .Orientierung. Kann eine solche Funktionalität jedoch in Browsern implementiert werden, die auf Android-Geräten ausgeführt werden?

Die Antwort darauf ist nuanciert. Die Ausführung von Javascript auf Standard-Webseiten kann tatsächlich die Bildschirmrotation auf Android-Geräten erkennen. Das Verhalten variiert jedoch je nach Gerät und Browser.

Herausforderungen und empfohlener Ansatz

Die größte Herausforderung liegt im inkonsistenten Verhalten beim Auslösen von Ereignissen auf Android-Geräten. Die Ereignisse „resize“ und „orientationChange“ können asynchron mit unterschiedlichen Häufigkeiten ausgelöst werden. Um diese Komplexität noch zu erhöhen, liefern Werte wie screen.width und window.orientation möglicherweise nicht immer vorhersehbare Ergebnisse. Daher wird es nicht empfohlen, sich ausschließlich auf screen.width zu verlassen, da dieser bei iOS-Rotationen unverändert bleibt.

Der zuverlässigste Ansatz besteht darin, gleichzeitig auf Größenänderungs- und Ausrichtungsänderungsereignisse zu warten. Die Ergänzung durch regelmäßige Abfragen mithilfe der setInterval-Funktion erhöht die Zuverlässigkeit und stellt einen gültigen Orientierungswert sicher.

<code class="javascript">var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Perform operations in response to orientation change
    }
};

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

// Android occasionally fails to trigger events for 180-degree rotations
setInterval(checkOrientation, 2000);</code>

Gerätespezifische Ergebnisse

Hier finden Sie eine Zusammenfassung der beobachteten Verhaltensweisen diverse getestete Geräte:

Device	Event Sequence	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, orientationchange	90	400	400
Samsung Galaxy Tablet (Portrait)	orientationchange, orientationchange, orientationchange, resize, orientationchange	0	683	683

Das obige ist der detaillierte Inhalt vonKann JavaScript die Rotation von Android-Telefonen in Browsern erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!