Größenänderung von HTML-Elementen bei Ausrichtungsänderung von Android

Question

Ich versuche, ein Ereignis in Javascript zu binden, um entweder die orientationchange oder resize Ereignisse in Android, um die Breite/Höhe von einigen Elementen für meine Web-App zu ändern. In dem Ereignis verwende ich window.innerHeight und window.innerWidth, um die aktuelle Höhe und Breite des Fensters zu erhalten.

Dies funktioniert auf iOS- und Desktop-Geräten hervorragend, aber auf Android scheint es, dass dieses Ereignis aufgerufen wird, bevor die Werte in der Fenstervariable geändert werden. Wenn also jemand vom Hoch- ins Querformat wechselt, erhalte ich immer noch die Werte für das Hochformat und kann daher die Größe nicht korrekt ändern. Weiß jemand, was das Problem ist, und wie ich es beheben kann?

Answer 1

Ich habe das Problem behoben. Es stellt sich heraus, dass das Größenänderungsereignis korrekt funktioniert, aber das Orientierungsänderungsereignis nicht. Ich testete, um zu sehen, wenn die orientationevent vorhanden war, und dann Bindung an, dass wenn möglich. Ich habe meinen Code geändert, um nur das Größenänderungsereignis zu verwenden, und habe den gewünschten Effekt erzielt.

Ich bin mir nicht sicher, ob dies nur bei meinem Code der Fall ist, aber das war es, was das Problem für mich gelöst hat.

Answer 2

Meine Nachforschungen ergaben, dass dieser Android-Webview-Fehler ("orientationchange" feuert 20-150ms vor der Änderung des window.innerHeight Javascript-Wertes) existiert, wenn Sie den Standard-Benutzeragenten der Webansicht ändern. Fragen Sie mich aber nicht, wie das eine mit dem anderen zusammenhängt.

Aber um Ihr Problem zu lösen, können Sie eine der folgenden Möglichkeiten nutzen:

1) Entfernen Sie die folgende Useragent-Modifikation aus Ihrem Code

webView.getSettings().setUserAgentString("custom-user-agent");

2) Verwenden Sie das Ereignis "Größenänderung" anstelle des Ereignisses "Orientierungsänderung".

Answer 3

Hierfür gibt es CSS-Selektoren:

/*normal styles here */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      width:768px;
   }
}

Fuente: http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes

Answer 4

Ich kann bestätigen, dass das "Orientierungsänderung"-Ereignis in Android 2.2 und 2.3 nicht wie erwartet funktioniert. Es sagt, es vorhanden, wenn Sie für die Verfügbarkeit zu überprüfen, aber dann nicht Feuer. Es funktioniert in Android 1.6 und 2.1 aber. Ich endete, genau wie Sie, mit "resize" -Ereignis für alle Android-Versionen.

Answer 5

Werfen Sie einen Blick auf die Fragen und Antworten für Drehung des Android-Handys im Browser mit JavaScript erkennen . Sie umfasst eine plattformübergreifende Erkennung von Orientierungsänderungen.
Um die Größe des Ansichtsfensters und/oder des Fensters plattformübergreifend zu ermitteln, sehen Sie sich http://responsejs.com/ o http://verge.airve.com/ .