Phonegap/HTML5 y problema de tamaño de pantalla de Android en girar de paisaje a retrato

Question

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

Cuando se gira la pantalla de paisaje a retrato, la altura de la ventana gráfica de contenido parece permanecer en la altura anterior; sin embargo, el ancho de la ventana cambia correctamente. Las siguientes imágenes tratan de mostrar esto un poco más claro:

gira a

vi esta pregunta: Android Screen Orientation: Landscape Back to Portrait ... pero mientras que la respuesta aceptada puede verdad, no estoy del todo seguro de lo que es siendo solicitado allí.

sólo tengo un diseño/main.xml que lleva a 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 algunas secuencias de comandos detección de orientación 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 dados. Alguna idea aqui?

ACTUALIZACIÓN

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

Answer 1

Hace un tiempo tuve un problema similar con Phonegap. El código siguiente debería ayudarte a resolver este problema.

1 - Asegúrese de que el archivo está siendo llamado phonegap.js dentro de la cabeza del archivo html

2 - Añadir el siguiente etiqueta meta dentro de la cabeza 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 en las orientaciones differnet, posiblemente diferentes imágenes, utilizar un estado de conmutación similares ment

function updateOrientation() 
{ 
    var e = window.orientation; 
    switch(e) 
    { 
     case 0: 
      // PORTRAIT 
     break; 

     case -90: 
      // LANDSCAPE 
     break; 

     case 90: 
      // LANDSCAPE 
     break; 

     default: 
      //PORTRAIT 
     break; 
    }   
} 

5 - Añadir el siguiente estilo después de su cierre Javascript etiqueta

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

intenta lo anterior y quiero saber si funciona, si no hay algunos otros enfoques que se pueden tomar.

Gracias, L L & Partners

Answer 2

estoy de acuerdo con el comentario anterior sobre el uso de metaetiqueta ventana gráfica.Aunque agregaría que también debe especificar su densidad de píxeles para su diseño.

Una cosa que he encontrado que es invaluable en el diseño de portait vs. lanscape en dispositivos móviles es el uso de consultas de medios de CSS. Esto le permitirá cambiar el estilo CSS de los elementos de pantalla en los modos horizontal y vertical sin tener que depender en absoluto de javascript.
Esto también permite un mejor control al diseñar cosas para teléfonos inteligentes y tabletas.

Answer 3

Ir al manifiesto de archivo:

dentro de la actividad de añadir el siguiente atributos:

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

Answer 4

que tenían el mismo problema pero con Intel marco de aplicación XDK con construir Córdoba en Para resolver el problema de todos. lo que hice fue hacer un nuevo proyecto, copiar todo lo que tenía en el anterior y reconstruir Córdoba en él. Aunque esta vez no agregué los complementos a través de la interfaz, solo copié los archivos de configuración que estaban en mi proyecto anterior. Curiosamente, funcionó y ahora la ventana se ajusta perfectamente. Así que supongo que es probablemente un problema con la versión o algo en las configuraciones está mal.

Espero que haya ayudado de alguna manera.

P.S lo siento por los pobres Inglés

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

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 esto no sucede a menudo) y hay un poco de Laging en la interfaz de unos pocos fotogramas. Si se pregunta por qué hay tiempo de espera en el paisaje es porque, por alguna razón, se anula por ... algo. No sé por qué cordova hace esto pero, por el momento, es la única forma que encontré para resolver este error.

Espero que ayude :-D