Bildschirmausrichtung in Browsern erkennen
In Safari auf iPhones Bildschirm Orientierungsänderungen können durch das Ereignis onorientationchange erkannt werden. Es stellt sich jedoch die Frage: Können Android-Telefone ähnliche Funktionen zur Orientierungserkennung bieten?
JavaScript und Android Phone Rotation
Das Verhalten der Orientierungserkennung variiert zwischen Android-Geräten erheblich. Die Ereignisse „resize“ und „orientationChange“ werden möglicherweise in unterschiedlichen Reihenfolgen mit inkonsistenter Häufigkeit ausgelöst. Darüber hinaus werden Werte wie screen.width und window.orientation nicht immer wie erwartet aktualisiert.
Zuverlässiger Ansatz zur Rotationserkennung
Um die Zuverlässigkeit zu gewährleisten, wird empfohlen, sich anzumelden sowohl Größenänderungs- als auch Orientierungsänderungsereignisse. Zusätzlich kann ein Abfragemechanismus implementiert werden, um verpasste Ereignisse zu erfassen:
<code class="javascript">var previousOrientation = window.orientation; var checkOrientation = function(){ if(window.orientation !== previousOrientation){ previousOrientation = window.orientation; // orientation changed, take appropriate actions } }; window.addEventListener("resize", checkOrientation, false); window.addEventListener("orientationchange", checkOrientation, false); // (optional) Android may fail to fire events on 180 degree rotations setInterval(checkOrientation, 2000);</code>
Gerätespezifische Ergebnisse
Tests auf verschiedenen Geräten ergaben Inkonsistenzen. Während iOS-Geräte ein einheitliches Verhalten aufweisen, weisen Android-Geräte Unterschiede auf. Die folgende Tabelle fasst die beobachteten Ergebnisse zusammen:
Device | Events Fired | Orientation | innerWidth | screen.width |
---|---|---|---|---|
iPad 2 (landscape to portrait) | resize, orientationchange | 0, 90 | 1024, 768 | 768, 768 |
iPad 2 (portrait to landscape) | resize, orientationchange | 90, 0 | 768, 1024 | 768, 768 |
iPhone 4 (landscape to portrait) | resize, orientationchange | 0, 90 | 480, 320 | 320, 320 |
iPhone 4 (portrait to landscape) | resize, orientationchange | 90, 0 | 320, 480 | 320, 320 |
Droid phone (portrait to landscape) | orientationchange, resize | 90, 90 | 320, 569 | 320, 569 |
Droid phone (landscape to portrait) | orientationchange, resize | 0, 0 | 569, 320 | 569, 320 |
Samsung Galaxy Tablet (landscape to portrait) | orientationchange, orientationchange, orientationchange, resize, orientationchange | 0, 90, 90, 90, 90 | 400, 400, 400, 683, 683 | |
Samsung Galaxy Tablet (portrait to landscape) | orientationchange, orientationchange, orientationchange, resize, orientationchange | 90, 90, 0, 90, 90 | 683, 683, 683, 400, 400 |
Daher ist die Erkennung der Rotation von Android-Telefonen mit JavaScript in Browsern zwar möglich, das Verhalten variiert jedoch je nach Gerät und erfordert einen robusten Ansatz, um die Zuverlässigkeit sicherzustellen.
Das obige ist der detaillierte Inhalt vonKann JavaScript die Drehung eines Android-Telefons in einem Browser zuverlässig erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!