Estilo de pantalla cuando el teclado virtual está activo

No estoy seguro, ¿es este el efecto deseado ?. Revise este enlace

http://jsfiddle.net/UHdCw/3/

Actualizar

(1). Suponiendo que es un sitio web y se está ejecutando en el navegador del dispositivo. Entonces podemos comprobar la presencia del teclado virtual comprobando el tamaño de la pantalla.

Compruebe el navegador del dispositivo: http://jsfiddle.net/UHdCw/8/show/

Código: – http://jsfiddle.net/UHdCw/8/

(2). Si está creando aplicaciones nativas con HTML5 y Phonegap, las cosas serán diferentes. Dado que no hay gancho API directo para comprobar el estado del keybord, tenemos que escribir nuestro propio complemento en Phonegap.

En Android puedes comprobar mostrar / ocultar el estado del teclado usando el código nativo [ comprobar aquí ]. Y tenemos que escribir plugin Phonegap para obtener esos eventos en nuestro HTML.

[Phonegap es un ejemplo. Creo que la mayoría de los html a los marcos nativos tienen este tipo de felicidad para gancho con código nativo]

Actualización de iOS

Como usted dijo no hay cambio en la altura / posición cuando el teclado está presente. Podemos hacer una cosa, cuando la entrada consigue el foco, podemos agregar la clase de encogimiento y reducir el tamaño de los elementos. Compruebe el siguiente enlace.

http://jsfiddle.net/UHdCw/28/show/

Me encontré con el mismo problema, esto funciona para mí:

 <!-- Android Viewport height fix--> <script type="text/javascript"> var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile"); if(isAndroid) { document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">'); } </script> 

Haga que JavaScript aplique una clase al cuerpo cuando un elemento de entrada tiene focus .

 $("input, textarea").focus(function(){ $(document.body).addClass('when-keyboard-showing'); }); $("input, textarea").blur( function(){ $(document.body).removeClass('when-keyboard-showing'); }); 

A continuación, utilice las consultas @media para determinar si la vista móvil:

 @media (max-width:550px) { body.keyboard-up .header { height:0; padding:0; } } 

La combinación te dejará estilizar la página cuando el teclado esté arriba, en móvil. Gracias.