Phonegap / HTML5 y la pantalla de Android redimensionan el problema en rotación de paisaje a retrato

Estoy experimentando un problema extraño con una aplicación de teléfono móvil Android ahora mismo cuando el usuario gira de paisaje a retrato, pero no al revés.

Cuando se gira la pantalla de paisaje a portait, la altura de la ventana de contenido parece permanecer en la altura anterior, pero el ancho de la ventana de visualización cambia de tamaño correctamente. Las siguientes imágenes intentan mostrar esto un poco más claro:

Vista del paisaje... Gira a ... y luego vista de retrato

Vi esta pregunta: Android Orientación de pantalla: Paisaje Volver a Retrato … pero aunque la respuesta aceptada puede ser cierto, no estoy completamente seguro de lo que se está pidiendo allí.

Sólo tengo un layout / main.xml que lleva la configuración por defecto:

<?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> 

También he intentado poner en alguna orientación de detección de secuencias de comandos para ver si eso ayuda – He intentado:

  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'}); 

y también

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

Pero – no hay dados. ¿Alguna idea aquí?

ACTUALIZAR

Esto sólo parece ser un problema en los dispositivos ICS – y en realidad hay un problema de desplazamiento en modo horizontal en los dispositivos que están experimentando este problema. JQM Scroll se utiliza para activar el desplazamiento en las divs diferentes.

Tuve un problema similar con phonegap hace un tiempo. El código siguiente debería ayudarle a resolver este problema.

1 – Asegúrese de que el archivo phonegap.js se está llamando dentro de la cabecera del archivo html

2 – Agregue la siguiente metaetiqueta dentro de la cabecera de la página html

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

3 – Añadir un detector de eventos en el onDeviceReady ()

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

4 – Si desea agregar cambios específicos a las orientaciones de differnet, posiblemente imágenes diferentes, utilice una sentencia switch similar

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

5 – Agregue el siguiente estilo después de su etiqueta de cierre javascript

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

Por favor, intente lo anterior y hágamelo saber si funciona, si no hay algunos otros enfoques que podría tomar.

Gracias, L & L Partners

Ir al archivo de manifiesto:

Dentro de la actividad agregue los siguientes atributos:

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

Estoy de acuerdo con el comentario anterior sobre el uso de metatag de viewport. Aunque quisiera añadir que también debe especificar la densidad de píxeles prevista para su diseño.

Una cosa que he encontrado para ser invaluable en la colocación de portait vs lanscape en dispositivos móviles es el uso de consultas de medios CSS. Esto le permitirá cambiar el estilo CSS de elementos de pantalla en los modos horizontal y vertical sin tener que confiar en javascript en absoluto.
Esto también permite un mejor control en la disposición de cosas para smartphone vs tableta también.

Tuve el mismo problema, pero con Intel xdk app marco con cordova construir pulg Para resolver el problema todo lo que hice fue hacer un nuevo proyecto, copiar todo lo que tenía en la anterior y reconstruir Córdoba en ella. Aunque esta vez, no agregué los complementos a través de la interfaz, pero sólo copié los archivos de configuración que estaban en mi proyecto anterior. Curiosamente, funcionó y ahora la ventana se ajusta muy bien. Así que mi conjetura es probablemente un problema con la versión o algo en los configs está mal.

Espero que ayudó de alguna manera.

PS lo siento por el pobre inglés

ACTUALIZACIÓN Parecía que el problema persistió cuando he construido la aplicación. Para resolver el problema (por ahora, ya que parece ser la única solución) es hacerlo.

 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; } } 

Funciona el 99% del tiempo (a veces no se ajusta correctamente, pero no sucede a menudo) y hay un poco de laging en la interfaz de unos pocos fotogramas. Si te preguntas por qué hay tiempo de espera en el paisaje es porque por alguna razón, obtiene anular por …. algo. No sé por qué cordova hace esto pero, por el momento, es la única manera que encontré para resolver este error.

Espero que ayude 😀

  • Android Rotación de MapView
  • Gire ImageView en Android en un punto fijo con RotateAnimation
  • Actividad de reinicio en la rotación de Android
  • ¿Qué se llama después de "onConfigurationChanged ()"?
  • Android: Activa el estado de rotación del acelerómetro
  • Rotar correctamente las imágenes web utilizando Picasso de Square
  • Android gire TextView en nivel de API> = 8
  • La forma más simple de rotar correctamente MapView en Android?
  • LibGDX 1.5 girando sprite alrededor de su centro
  • Android - ¿Cómo diseñar un tipo de diseño de Rotary Dialer / Rotary Dialer?
  • Rotar diseño de trama que contiene botones dinámicos
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.