Ich habe diesen Orientierungstestcode unten gefunden und nach JQTouch-Referenzmaterial gesucht. Dies funktioniert im iOS-Simulator auf Mobile Safari korrekt, wird jedoch in Phonegap nicht korrekt behandelt. Mein Projekt stößt auf dasselbe Problem, das diese Testseite beendet. Gibt es eine Möglichkeit, die Orientierungsänderung mithilfe von JavaScript in Phonegap zu erfassen?
window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch (orientation) {
case 0:
/* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "portrait");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
break;
case 90:
/* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
/* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
}
Antworten:
Das ist was ich mache:
Update Mai 2019:
window.orientation
ist eine veraltete Funktion und wird von den meisten Browsern laut MDN nicht unterstützt . Dasorientationchange
Ereignis ist mit window.orientation verbunden und sollte daher wahrscheinlich nicht verwendet werden.quelle
window.onorientationchange = function() { setTimeout(functionName, 0); };
Ich verwende
window.onresize = function(){ checkOrientation(); }
Und in checkOrientation können Sie window.orientation oder body width check verwenden, aber die Idee ist, dass "window.onresize" die browserübergreifendste Methode ist, zumindest bei den meisten mobilen und Desktop-Browsern, die ich hatte Gelegenheit zum Testen mit.quelle
quelle
resize
Ereignis anhängen . IIRC, diese Abfragen funktionieren jedoch nicht richtig, wenn die Tastatur geöffnet ist.Ich bin auch ziemlich neu in iOS und Phonegap, aber ich konnte dies tun, indem ich einen eventListener hinzufügte. Ich habe das Gleiche getan (anhand des Beispiels, auf das Sie verweisen) und konnte es nicht zum Laufen bringen. Aber das schien den Trick zu tun:
Möglicherweise haben Sie Glück, wenn Sie in der PhoneGap-Google-Gruppe nach dem Begriff "Orientierung" suchen .
Ein Beispiel, über das ich als Beispiel gelesen habe, wie man Orientierung erkennt, war Pie Guy: ( Spiel , JS-Datei ). Es ähnelt dem Code, den Sie gepostet haben, aber wie Sie ... Ich konnte ihn nicht zum Laufen bringen.
Eine Einschränkung: Der eventListener hat für mich gearbeitet, aber ich bin mir nicht sicher, ob dies ein zu intensiver Ansatz ist. Bisher war es der einzige Weg, der für mich funktioniert hat, aber ich weiß nicht, ob es bessere, schlankere Wege gibt.
UPDATE hat den obigen Code behoben, es funktioniert jetzt
quelle
Während der Arbeit mit dem
orientationchange
Ereignis benötigte ich eine Zeitüberschreitung, um die richtigen Abmessungen der Elemente auf der Seite zu erhalten, aber matchMedia funktionierte einwandfrei. Mein letzter Code:quelle
Ich glaube, dass die richtige Antwort bereits veröffentlicht und akzeptiert wurde, aber es gibt ein Problem, das ich selbst erlebt habe und das einige andere hier erwähnt haben.
Auf bestimmten Plattformen werden verschiedene Eigenschaften wie Fensterabmessungen (
window.innerWidth
,window.innerHeight
) und diewindow.orientation
Eigenschaft zum Zeitpunkt des Auslösens des Ereignisses nicht aktualisiert"orientationchange"
. Viele Male, die Eigenschaftwindow.orientation
istundefined
für wenige Millisekunden nach dem Brennen von"orientationchange"
(zumindest ist es in Chrome auf iOS).Der beste Weg, um mit diesem Problem umzugehen, war:
Ich überprüfe, ob die Ausrichtung entweder undefiniert ist oder ob die Ausrichtung der zuletzt erkannten Ausrichtung entspricht. Wenn beides zutrifft, warte ich zehn Millisekunden und analysiere dann die Ausrichtung erneut. Wenn die Ausrichtung ein richtiger Wert ist, rufe ich die
showXOrientation
Funktionen auf. Wenn die Ausrichtung ungültig ist, schleife ich meine Überprüfungsfunktion weiter und warte jedes Mal zehn Millisekunden, bis sie gültig ist.Jetzt würde ich eine JSFiddle dafür erstellen, wie ich es normalerweise getan habe, aber JSFiddle hat nicht für mich gearbeitet und mein Support-Fehler dafür wurde geschlossen, da niemand anderes das gleiche Problem meldet. Wenn jemand anderes daraus eine JSFiddle machen möchte, fahren Sie bitte fort.
Vielen Dank! Ich hoffe das hilft!
quelle
Folgendes habe ich getan:
quelle
Obwohl sich die Frage nur auf die Nutzung von PhoneGap und iOS bezieht und bereits beantwortet wurde, kann ich der umfassenderen Frage der Erkennung der Bildschirmorientierung mit JS im Jahr 2019 einige Punkte hinzufügen:
window.orientation
Die Eigenschaft ist veraltet und wird von Android-Browsern nicht unterstützt. Es gibt eine neuere Eigenschaft, die weitere Informationen zur Ausrichtung bietetscreen.orientation
. Es ist jedoch noch experimentell und wird von iOS Safari nicht unterstützt . Um das beste Ergebnis zu erzielen, müssen Sie wahrscheinlich die Kombination der beiden verwenden :const angle = screen.orientation ? screen.orientation.angle : window.orientation
.Wie @benallansmith in seinem Kommentar erwähnt hat , wird das
window.onorientationchange
Ereignis zuvor ausgelöstwindow.onresize
, sodass Sie die tatsächlichen Abmessungen des Bildschirms nur erhalten, wenn Sie nach dem Ereignis "Orientierungsänderung" eine Verzögerung hinzufügen.Es gibt ein Cordova Screen Orientation Plugin zur Unterstützung älterer mobiler Browser, aber ich glaube, dass es heutzutage nicht mehr nötig ist, es zu verwenden.
Es gab auch ein
screen.onorientationchange
Ereignis, aber es ist veraltet und sollte nicht verwendet werden. Nur zur Vollständigkeit der Antwort hinzugefügt.In meinem Anwendungsfall war mir die tatsächliche Ausrichtung nicht wichtig, sondern die tatsächliche Breite und Höhe des Fensters, die sich offensichtlich mit der Ausrichtung ändert. Daher habe ich
resize
event verwendet, um Verzögerungen zwischen demorientationchange
Ereignis und der Aktualisierung der Fensterdimensionen zu vermeiden :Hinweis 1: Ich habe hier die EcmaScript 6-Syntax verwendet. Stellen Sie sicher, dass Sie sie bei Bedarf in ES5 kompilieren.
Hinweis 2: Das
window.onresize
Ereignis wird auch ausgelöst, wenn die virtuelle Tastatur umgeschaltet wird , nicht nur, wenn sich die Ausrichtung ändert.quelle
Ich habe diesen Code gefunden, um zu erkennen, ob sich das Gerät im Querformat befindet, und in diesem Fall eine Begrüßungsseite mit der Aufschrift "Ausrichtung ändern, um die Site anzuzeigen" hinzuzufügen. Es funktioniert auf iOS, Android und Windows Phones. Ich denke, dass dies sehr nützlich ist, da es ziemlich elegant ist und es vermieden wird, eine Landschaftsansicht für die mobile Site festzulegen. Der Code funktioniert sehr gut. Das einzige, was nicht ganz zufriedenstellend ist, ist, dass die Begrüßungsseite nicht angezeigt wird, wenn jemand die Seite in der Querformatansicht lädt.
Und der HTML:
<div id="alert" class="hide"> <div id="content">This site is not thought to be viewed in landscape mode, please turn your device </div> </div>
quelle
quelle
Folgendes hat bei mir funktioniert:
Ich brauchte das Timeout, da der Wert von
window.orientation
nicht sofort aktualisiert wirdquelle
Ich erstelle eine jQTouch-App in PhoneGap für das iPhone. Ich habe seit Tagen mit diesem Problem gekämpft. Ich habe die Eventlistener-Lösung einige Male vorgeschlagen, konnte sie aber einfach nicht zum Laufen bringen.
Am Ende habe ich eine andere Lösung gefunden. Grundsätzlich wird die Breite des Körpers regelmäßig mit Settimeout überprüft. Wenn die Breite 320 beträgt, ist die Ausrichtung Hochformat, wenn 480 Querformat. Wenn sich die Ausrichtung seit der letzten Überprüfung geändert hat, wird entweder eine Hochformat- oder eine Querformatfunktion ausgelöst, in der Sie Ihr Ding für jede Ausrichtung ausführen können.
Code (Hinweis, ich weiß, dass der Code einige Wiederholungen enthält, habe mich aber noch nicht darum gekümmert, ihn zu kürzen!):
quelle
onresize
Ereignis verwenden, das sofort ausgelöst wird, nicht innerhalb von 500 Millisekunden. 2) Dieser Code ist androidspezifisch. Verwenden Sie ihnonorientationchange
stattdessen für das iPhone. 3) Testen Sie, ob er im Browser unterstützt wird:"onorientationchange" in window