PhoneGap / JQuery Mobile – El estilo de página se rompe cuando el teclado está visible

Tengo una aplicación construida con Phonegap y JQuery Mobile. Siempre que el teclado virtual muestre – en las entradas de formulario, etc. – toda la página cambia de tamaño. Imágenes, botones y texto. Lo que estoy asumiendo es algo romper el CSS?

¿Alguien más tuvo este problema, o sabe por qué podría estar ocurriendo? Tengo que reiniciar la aplicación para restablecer el diseño.

¡Cualquier idea apreciada!

¡Gracias!

He encontrado las respuestas aquí:

http://solutions.michaelbrooks.ca/2011/07/05/android-soft-keyboard-resizes-web-view/

http://comments.gmane.org/gmane.comp.handhelds.phonegap/10207

Una combinación de añadir:

android:windowSoftInputMode="adjustPan"

A AndroidManifest.xml

Y <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

A index.html, hizo el trabajo para mí.

Espero que esto ayude a alguien.

Para los usuarios de Phonegap Build, hay una preferencia de ajuste disponible en el archivo config.xml,

<preference name="android-windowSoftInputMode" value="stateHidden|adjustPan" />

Los valores que puede tomar son los mismos que la propiedad nativa de Android, si necesita información adicional sobre los parámetros y el comportamiento, consulte la guía de desarrolladores de android aquí: http://developer.android.com/guide/topics/manifest/activity- Element.html # wsoft

He probado esto usando Phonegap Build 3.3.0 y jQuery Mobile y trabajó bien para mí, espero que ayude.

Tengo una solución probada para este problema, también estaba enfrentando el mismo problema, pero lo he resuelto yo mismo. En primer lugar crear un campo dentro del cuerpo y lo hacen oculto o puede hacer que se esconda detrás de una div usando z-index para que no sea visible.

 <script> $(document).ready(function() { document.getElementById('example').value=''; }); </script> <body> <div style='z-index:50;position:absolute;height:100%;width:100%;'> Your page matter here</div> <select id='example' style='z-index:10'> <option value=''>a</option> </select></pre> </body>

El moto es que tenemos que configurar este campo select cuando la carga de la página, y haciendo esto detendrá el parpadeo seguro … probarlo chicos … funcionó para mí