Ich weiß, dass Sie in Safari auf einem iPhone die Ausrichtung des Bildschirms und die Änderung der Ausrichtung erkennen können, indem Sie auf das onorientationchange
Ereignis warten window.orientation
und den Winkel abfragen .
Ist dies im Browser auf Android-Handys möglich?
Um klar zu sein, frage ich, ob die Rotation eines Android-Geräts durch JavaScript erkannt werden kann, das auf einer Standardwebseite ausgeführt wird. Es ist auf einem iPhone möglich, und ich habe mich gefragt, ob dies für Android-Telefone möglich ist.
quelle
Das tatsächliche Verhalten zwischen verschiedenen Geräten ist inkonsistent . Die Ereignisse "Größe ändern" und "Ausrichtung ändern" können in einer anderen Reihenfolge mit unterschiedlicher Häufigkeit ausgelöst werden. Außerdem ändern sich einige Werte (z. B. screen.width und window.orientation) nicht immer, wenn Sie dies erwarten. Vermeiden Sie screen.width - es ändert sich nicht, wenn Sie in iOS drehen.
Der zuverlässige Ansatz besteht darin, sowohl Größenänderungs- als auch Orientierungsänderungsereignisse abzuhören (mit einigen Abfragen als Sicherheitsmaßnahme), und Sie erhalten schließlich einen gültigen Wert für die Ausrichtung. Bei meinen Tests können Android-Geräte gelegentlich keine Ereignisse auslösen, wenn sie um volle 180 Grad gedreht werden. Daher habe ich auch ein setInterval eingefügt, um die Ausrichtung abzufragen.
Hier sind die Ergebnisse der vier Geräte, die ich getestet habe (Entschuldigung für die ASCII-Tabelle, aber es schien der einfachste Weg zu sein, die Ergebnisse zu präsentieren). Abgesehen von der Konsistenz zwischen den iOS-Geräten gibt es eine große Vielfalt zwischen den Geräten. HINWEIS: Die Ereignisse werden in der Reihenfolge aufgelistet, in der sie ausgelöst wurden.
quelle
previousOrientation
sollte mit der dann aktuellen Ausrichtung initialisiert werden:var previousOrientation = window.orientation;
Wenn Sie 180-Grad-Drehungen ignorieren möchten, dh nicht zwischen der Links- oder Rechtslandschaft und den auf dem Kopf stehenden oder nicht-Varianten unterscheiden müssen, fügen Sie Folgendes hinzu als erste Zeile zucheckOrientation()
:if (0 === (previousOrientation + window.orientation) % 180) return;
Ohne zusätzlichesetTimeout
Tricks profitieren Sie jedoch nur unter iOS, wo eine schnelle 180-Grad-Drehung nur ein einzigesorientationchange
Ereignis erzeugt.Die hervorragende Antwort von Two-Bit-Fool liefert den gesamten Hintergrund, aber lassen Sie mich eine kurze, pragmatische Zusammenfassung des Umgangs mit Orientierungsänderungen unter iOS und Android versuchen :
resize
Ereignis.window.innerWidth
undwindow.InnerHeight
nur.window.orientation
- es ist unter iOS nicht aktuell.resize
Ereignis unter Android und nur dasorientationchange
Ereignis unter iOS.window.orientation
(undwindow.innerWidth
undwindow.InnerHeight
)Diese Ansätze bieten geringfügige Vorteile gegenüber dem Erinnern an die vorherige Ausrichtung und dem Vergleichen:
window.orientation
ist in Desktop-Browsern nicht verfügbar).quelle
Sie können das Fenstergrößenänderungsereignis jederzeit anhören. Wenn in diesem Fall das Fenster größer als breit und breiter als hoch wurde (oder umgekehrt), können Sie ziemlich sicher sein, dass die Ausrichtung des Telefons gerade geändert wurde.
quelle
Es ist in HTML5 möglich.
Weitere Informationen (und eine Live-Demo) finden Sie hier: http://slides.html5rocks.com/#slide-orientation .
Es unterstützt auch Deskop-Browser, gibt jedoch immer den gleichen Wert zurück.
quelle
Ich hatte das gleiche Problem. Ich verwende Phonegap und Jquery Mobile für Adroid-Geräte. Um die Größe richtig zu ändern, musste ich eine Zeitüberschreitung festlegen:
quelle
Hier ist die Lösung:
quelle
Ein weiteres Problem: Einige Android-Tablets (das Motorola Xoom, von dem ich glaube, und ein Low-End-Elonex-Tablet, an dem ich einige Tests durchführe, wahrscheinlich auch andere) haben ihre Beschleunigungsmesser so eingerichtet, dass window.orientation == 0 im LANDSCAPE-Modus und nicht im Hochformat !
quelle
Sie können die Lösung ausprobieren, die mit allen Browsern kompatibel ist.
Das folgende
orientationchange
Bild zeigt die Kompatibilität: Daherorientaionchange
verfasse ich eine Polyfüllung, die auf dem @ media-Attribut basiert, um die Dienstprogrammbibliothek für den Orientierungswechsel zu reparieren - Orientierungswechsel-Fixquelle
Es ist erwähnenswert, dass ich auf meinem Epic 4G Touch die Webansicht für die Verwendung von WebChromeClient einrichten musste, bevor einer der JavaScript-Android-Aufrufe funktionierte.
quelle
Browserübergreifend
quelle
Ein kleiner Beitrag zur Antwort des Zwei-Bit-Narren:
Wie in der Tabelle auf Droidentelefonen beschrieben, wird das Ereignis "Orientierungsänderung" früher als das Ereignis "Größenänderung" ausgelöst, wodurch der nächste Größenänderungsaufruf blockiert wird (aufgrund der if-Anweisung). Die Width-Eigenschaft ist immer noch nicht festgelegt.
Eine Problemumgehung, die möglicherweise nicht perfekt ist, könnte darin bestehen, das Ereignis "Orientierungswechsel" nicht auszulösen. Dies kann archiviert werden, indem die Ereignisbindung "Orientierungsänderung" in die "if" -Anweisung eingeschlossen wird:
Ich hoffe es hilft
(Tests wurden mit Nexus S durchgeführt)
quelle