Wie erkenne ich die Orientierungsänderung mithilfe von Phonegap unter iOS richtig?
Ich fand diese Ausrichtung test code unten suchen JQTouch Referenz-material. Dieser funktioniert einwandfrei in den iOS-simulator auf mobile Safari aber nicht richtig behandelt werden, in Phonegap. Mein Projekt läuft in das gleiche Problem, ist das töten dieser test Seite. Gibt es eine Möglichkeit, Einblick in die Orientierung ändern mit JavaScript, Phonegap?
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;
}
}
InformationsquelleAutor der Frage ajpalma | 2011-03-12
Du musst angemeldet sein, um einen Kommentar abzugeben.
Benutze ich
window.onresize = function(){ checkOrientation(); }
Und in checkOrientation, die Sie einsetzen können Fenster.Orientierung oder Körper Breite prüfen
aber die Idee ist, die " - Fenster.onresize" ist die cross-browser-Methode, mindestens mit der Mehrheit der mobilen und desktop-Browsern, dass ich die Gelegenheit hatte, zu testen.
InformationsquelleAutor der Antwort Raine
Ich bin ziemlich neu auf iOS und Phonegap als gut, aber ich war in der Lage, dies zu tun, indem man ein eventListener. Ich habe die gleiche Sache (mit dem Beispiel, das Sie referenzieren), und konnte nicht damit es funktioniert. Aber dies schien, den trick zu tun:
Haben Sie vielleicht Glück suchen, die Sie PhoneGap Google-Gruppe für den Begriff "Orientierung".
Ein Beispiel habe ich gelesen, als ein Beispiel, wie zu erkennen Orientierung war Pie Guy: (Spieljs-Datei). Es ist ähnlich wie der code, den Sie gepostet haben, aber wie Sie... ich konnte es nicht zu funktionieren.
Einer Einschränkung: die eventListener für mich gearbeitet, aber ich bin mir nicht sicher, ob dies eine allzu intensive Ansatz. Bisher ist es der einzige Weg, dass ist für mich gearbeitet, aber ich weiß nicht, ob es bessere, schlankere Möglichkeiten.
UPDATE behoben, der code oben, funktioniert es jetzt
InformationsquelleAutor der Antwort avoision
InformationsquelleAutor der Antwort Alyssa Reyes
Während der Arbeit mit der
orientationchange
Fall, ich brauchte ein timeout, um die richtigen Abmessungen der Elemente in der Seite, aber matchMedia fein gearbeitet. Meinen endgültigen code:InformationsquelleAutor der Antwort oncode
Ich glaube, dass die richtige Antwort wurde bereits gepostet und angenommen, doch es gibt ein Problem, das ich erlebt habe, mich und einige andere hier erwähnt haben.
Auf bestimmten Plattformen, verschiedene Eigenschaften wie die Fenster-Dimensionen (
window.innerWidth
window.innerHeight
) und diewindow.orientation
- Eigenschaft wird nicht aktualisiert, indem die Zeit, die das Ereignis"orientationchange"
ausgelöst hat. Viele Male, die-Eigenschaftwindow.orientation
istundefined
für ein paar Millisekunden nach der Zündung der"orientationchange"
(zumindest ist es in Chrome auf iOS).Der beste Weg, die ich gefunden habe behandeln das Thema war:
Bin ich zu überprüfen, ob die Ausrichtung ist entweder undefiniert, oder wenn die Ausrichtung ist gleich der letzten Orientierung erkannt. Wenn entweder wahr ist, warte ich zehn Millisekunden und dann analysieren Sie die Ausrichtung erneut. Wenn die Ausrichtung ist einen richtigen Wert hat, nenne ich die
showXOrientation
Funktionen. Wenn die Ausrichtung ist ungültig, ich wiederholt mein Giro-Funktion, warten zehn Millisekunden jedes mal, bis es gültig ist.Nun, ich würde ein JSFiddle für diese, wie ich es oft Tat, aber JSFiddle hat nicht gearbeitet für mich und mein support den Fehler für Sie war geschlossen, wie niemand sonst meldet das gleiche problem. Wenn jemand will, um diese in ein JSFiddle, bitte gehen Sie weiter.
Dank! Ich hoffe, das hilft!
InformationsquelleAutor der Antwort WebWanderer
Ich gefunden habe, diesen code zu erkennen, wenn das Gerät im Querformat und in diesem Fall fügen Sie einen Spritzer Seite sagen "ändern Sie die Ausrichtung auf die Website". Es funktioniert auf iOS -, android-und windows-Handys. Ich denke, dass dies sehr nützlich, da es sehr elegant und vermeiden, um eine Querformat-Ansicht für die mobile Website.
Der code funktioniert sehr gut. Das einzige, was nicht ganz befriedigend ist, dass, wenn jemand laden Sie die Seite im Querformat die splash-Seite nicht angezeigt wird.
Und 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>
InformationsquelleAutor der Antwort Luigi
hier ist was ich getan habe:
InformationsquelleAutor der Antwort Raul Gomez
Folgendes bei mir funktioniert:
Brauchte ich den timeout, weil der Wert der
window.orientation
aktualisiert sich nicht sofortInformationsquelleAutor der Antwort catalyst294
Ich bin erstellen einer jQTouch-app in PhoneGap für das iPhone. Ich habe gekämpft, mit diesem Problem seit Tagen. Ich habe gesehen, das eventlistener-Lösung ein paar mal, aber konnte einfach nicht bekommen es funktioniert.
Am Ende kam ich mit einer anderen Lösung. Es ist im Grunde überprüft die Breite des Körpers in regelmäßigen Abständen mit settimeout. Wenn die Breite ist 320 dann die Ausrichtung hochformat, wenn die 480 dann Landschaft. Dann, wenn die Ausrichtung geändert hat seit der letzten Prüfung, es wird Feuer entweder eine portrait-Funktion stuff oder eine Landschaft, die stuff-Funktion, wo Sie können, machen Sie Ihre Sache für jede Orientierung.
Code (beachten Sie, ich weiß, es gibt einige Wiederholungen im code, nur noch nicht die Mühe gemacht, schneiden Sie es nach unten noch!):
InformationsquelleAutor der Antwort Danny Connell