Wie können Sie die Rotation von Android-Telefonen in Browsern mithilfe von JavaScript zuverlässig erkennen?

Erkennen der Drehung von Android-Telefonen in Browsern mithilfe von JavaScript

Die Erkennung der Bildschirmausrichtung und von Änderungen in Safari auf iPhones mithilfe von JavaScript ist zwar möglich, aber ist dies auch auf Android-Telefonen möglich?

Responsive Rotationserkennung auf Android

Bei Android-Telefonen ist die Rotationserkennung mithilfe von JavaScript aufgrund des unterschiedlichen Verhaltens zwischen Geräten und Browsern eine komplexe Angelegenheit. Es ist unzuverlässig, sich ausschließlich auf die Größenänderungs- oder Ausrichtungsänderungsereignisse zu verlassen.

Zuverlässiger Ansatz

Der empfohlene Ansatz umfasst die Überwachung sowohl der Größenänderungs- als auch der Ausrichtungsänderungsereignisse und die kontinuierliche Überprüfung auf Ausrichtungsaktualisierungen durch Abfrageintervalle .

<code class="javascript">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);</code>

Gerätespezifisches Verhalten

Gerätereaktionen auf Ausrichtungsänderungen variieren erheblich. Hier ist eine Tabelle mit Ereignissequenzen und Werten, die beim Testen von vier verschiedenen Geräten erhalten wurden:

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

Fazit

Während die Ereignisbehandlung für Orientierungsänderungen zwischen iOS- und Android-Geräten unterschiedlich sein kann, gewährleistet die Verwendung des empfohlenen Ansatzes eine zuverlässige Orientierungserkennung auf Android-Telefonen mit JavaScript.

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