Phonegap / HTML5 und Android Bildschirm Resize Problem auf rotieren von Landschaft zu Porträt

Ich erlebe ein seltsames Problem mit einer Android-Handy-Anwendung jetzt, wenn der Benutzer von Landschaft zu Porträt dreht, aber nicht umgekehrt.

Wenn der Bildschirm von der Landschaft zur Portion gedreht wird, scheint die Höhe des Inhalts-Ansichtsfensters auf der vorherigen Höhe zu bleiben – aber die Breite des Ansichtsfensters wird korrekt geändert. Die folgenden Bilder versuchen dies ein wenig klarer zu zeigen:

Blick auf die Landschaft ... dreht sich um ... und dann Porträtansicht

Ich habe diese Frage gesehen: Android Screen Orientation: Landschaft Zurück zu Portrait … aber während die akzeptierte Antwort wahr sein kann, bin ich nicht ganz sicher, was dort gefragt wird.

Ich habe nur ein Layout / main.xml, das die Standardkonfiguration trägt:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> 

Ich habe auch versucht, in einige Orientierung Erkennung Skripting zu sehen, ob das hilft – ich habe versucht:

  var viewPortHeight = $(window).height(); alert (viewPortHeight+" x "+$(window).width()); var headerHeight = $('div[data-role="header"]').height(); var footerHeight = 0; var contentHeight = viewPortHeight - headerHeight - footerHeight; // Set all pages with class="page-content" to be at least contentHeight $('div[class="page-content"]').css({'min-height': contentHeight + 'px'}); 

und auch

  var devInfo = new DeviceInformation(); devInfo.setOrientation(0); time_column_count = Math.floor(viewport.height / 270); devInfo.setResolution({ height : $(window).width(), width : $(window).height() }); 

aber – keine Würfel. Irgendwelche Ideen hier?

AKTUALISIEREN

Dies scheint nur ein Problem auf ICS-Geräten zu sein – und es gibt tatsächlich ein Scrolling-Problem im Querformat auf Geräten, die dieses Problem erleben. JQM Scroll wird verwendet, um das Scrollen auf den verschiedenen divs zu aktivieren.

  • Deaktivieren und Aktivieren von Orientierungsänderungen in einer Aktivität in Android programmgesteuert
  • Android Zwei Finger Drehung
  • Wie bekomme ich den Zoomwert der beliebigen Matrix?
  • Drehe die Bildansicht um ihre Mitte, ohne ihre Kanten abzuschneiden
  • Wie behandeln Sie Aufkleber mit Größe und drehen Funktionalität?
  • Wie pausiert man Segeltuch von der Drehung für 2 Sekunden bei bestimmten Winkeln?
  • Wie man ein Ziehbares mit Anti-Aliasing aktiviert dreht
  • Android - malt gedrehte Bitmap in einen bestimmten Ort auf Leinwand
  • 4 Solutions collect form web for “Phonegap / HTML5 und Android Bildschirm Resize Problem auf rotieren von Landschaft zu Porträt”

    Ich hatte eine ähnliche Frage mit Telefongap eine Weile zurück. Der Code unten sollte hoffentlich helfen Ihnen, dieses Problem zu lösen.

    1 – Vergewissern Sie sich, dass die Datei "phonegap.js" im Kopf der HTML-Datei aufgerufen wird

    2 – Füge folgendes Meta-Tag innerhalb des Kopfes der HTML-Seite hinzu

     <meta name="viewport" content="width=device-width, initial-scale=1"> 

    3 – Hinzufügen eines Ereignis-Listeners im onDeviceReady ()

     <script type="text/javascript"> function onDeviceReady() { document.addEventListener("orientationChanged", updateOrientation); } </script> 

    4 – Wenn Sie bestimmte Änderungen an differnet-Orientierungen, ggf. unterschiedlichen Bildern hinzufügen möchten, verwenden Sie eine ähnliche switch-Anweisung

     function updateOrientation() { var e = window.orientation; switch(e) { case 0: // PORTRAIT break; case -90: // LANDSCAPE break; case 90: // LANDSCAPE break; default: //PORTRAIT break; } } 

    5 – Füge den folgenden Stil nach deinem Javascript-Tag hinzu

     <style> [data-role=page]{height: 100% !important; position:relative !important; top:0 !important;} </style> 

    Bitte versuchen Sie die oben und lassen Sie mich wissen, wenn es funktioniert, wenn nicht gibt es ein paar andere Ansätze, die Sie nehmen könnten.

    Danke, L & L Partner

    Gehe zu manifest-Datei:

    innerhalb der Aktivität die folgenden Attribute hinzufügen:

     android:theme="@android:style/Theme.Translucent" 

    Ich würde mit dem früheren Kommentar über die Verwendung von viewport metatag zustimmen. Obwohl ich hinzufügen würde, dass Sie auch Ihre beabsichtigte Pixeldichte für Ihr Layout angeben sollten.

    Eine Sache, die ich bei der Auslegung von Portait vs. lanscape auf mobilen Geräten unschätzbar gemacht habe, benutzt CSS-Medienanfragen. Diese erlauben es Ihnen, die CSS-Styling von Screen-Elementen in Landschafts-und Portrait-Modi zu ändern, ohne sich auf Javascript überhaupt verlassen.
    Dies ermöglicht auch eine bessere Kontrolle bei der Verlegung der Sache für Smartphone vs Tablette auch.

    Ich hatte das gleiche Problem, aber mit Intel xdk App Framework mit Cordova eingebaut. Um das Problem zu lösen, war alles, was ich tat, ein neues Projekt zu machen, kopiere alles, was ich in der vorherigen hatte und Cordova in ihm wieder aufbauen. Obwohl dieses Mal habe ich nicht die Plugins durch die Schnittstelle hinzugefügt, sondern nur kopiert die Konfigurationsdateien, die in meinem vorherigen Projekt war. Merkwürdigerweise hat es gearbeitet und nun passt sich das viewport gut an. Also meine Vermutung ist es wahrscheinlich ein Problem mit der Version oder etwas in den configs ist falsch.

    Hoffnung, die in irgendeiner Weise geholfen hat.

    PS sorry für das arme Englisch

    UPDATE Es schien das Problem beharrte, wenn ich die Anwendung gebaut habe. Um das Problem zu lösen (für jetzt, wie es scheint, die einzige Lösung zu sein) ist dies zu tun.

     window.addEventListener('orientationchange', doOnOrientationChange); function doOnOrientationChange() { switch(window.orientation) { case -90: case 90: setTimeout(function(){ var ScreenHeight = screen.height; document.body.style.height = '100%'; window.innerHeight = ScreenHeight - (FOOTER HEADER);},100); break; default: var ScreenHeight = screen.height; document.body.style.height = "100%"; window.innerHeight = ScreenHeight - (FOOTER HEADER); break; } } 

    Es funktioniert 99% der Zeit (manchmal passt es nicht richtig, aber es passiert nicht oft) und es gibt ein bisschen Laging in der Schnittstelle für ein paar Frames. Wenn Sie sich fragen, warum es Zeitüberschreitung in der Landschaft gibt, weil aus irgendeinem Grund, wird es überschrieben von … etwas. Ich weiß nicht, warum Cordova dies tut, aber vorerst ist es der einzige Weg, den ich gefunden habe, diesen Fehler zu lösen.

    Hoffe es hilft 😀

    Das Android ist ein Google Android Fan-Website, Alles über Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.