permisos - Phonegap/HTML5 y el problema de tamaño de la pantalla de Android en rotación de paisaje a retrato

portrait cordova

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 gráfica se ajusta correctamente. Las siguientes imágenes intentan mostrar esto un poco más claro:

gira a

Vi esta pregunta: Orientación de pantalla de Android: paisaje Volver a retrato ... pero si bien la respuesta aceptada puede ser cierta, no estoy del todo seguro de lo que se pide allí.

Solo tengo un diseño / main.xml que incluye la configuración predeterminada:

<?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 algunas secuencias de comandos de 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 hay dados. Alguna idea aqui?

ACTUALIZAR

Esto solo parece ser un problema en los dispositivos ICS, y en realidad hay 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

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

Una cosa que considero 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 2

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 phonegap.js se está llamando dentro del archivo html

2 - Agregue la siguiente metaetiqueta dentro del encabezado de la página html

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

3 - Agregue un detector de eventos en 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, use una declaración de cambio 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 javascript de cierre

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

Por favor, intente lo anterior y avíseme si funciona, si no hay otros enfoques que podría tomar.

Gracias, L & L Partners

Answer 3

Ir al archivo de manifiesto:

dentro de la actividad agrega los siguientes atributos:

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

Answer 4

Tuve el mismo problema pero con el framework Intel xdk app con cordova build in. Para resolver el problema, todo 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.

PD, perdón por el pobre inglés

ACTUALIZACIÓN Parecía que el problema persistía cuando construí 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 no ocurre con frecuencia) y hay un poco de retardo en la interfaz para algunos 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