jQuery/js/html5 cambio de contenido de la página cuando el teclado es visible en los dispositivos móviles

Question

Duplicar posibles:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

Estoy construyendo una versión móvil de un sitio web, y estoy Me interesa si puedo crear utilizando jquery/js/html5 o cualquier otra tecnología el mismo efecto de pantalla dividida que se puede realizar en aplicaciones móviles cuando el teclado virtual está visible.

Por ejemplo, si un usuario ingresa a mi página web y hace clic en un campo de texto de entrada, se muestra el teclado virtual y el explorador automáticamente se acerca al área donde está el campo de texto de entrada.

Lo que quiero es cambiar el contenido de mi página en el momento en que el teclado virtual es visible según la nueva resolución (altura de la pantalla - altura del teclado), moviendo el campo de entrada de texto en la parte superior de la pantalla, seguido de algunos consejos dependiendo de lo que el usuario ingrese en el campo de texto.

Éstos son algunos bocetos para ver lo que estoy hablando:

Ésta es la vista de la página sin teclado, los resultados sobre la base de la búsqueda:

página con el teclado retrato, el logotipo desaparece, la entrada de texto se mueve hacia arriba, y un máximo de 4 artículos se mostró

página con el teclado horizontal, el logotipo desaparece, thext entrada se desplaza hacia arriba y se agranda, sólo 2 elementos se mostraron

es el teclado está oculto, la página debe ir a perturbar a 1.

Espero que esto ayude.

Answer 1

He intentado una primera solución para su problema por la captura el evento de cambio de tamaño Con eso se puede saber la orientación y Gest IS es visible el teclado

ACTUALIZACIÓN: añadir soporte Safari Mobile iOS con LKM solution

var is_keyboard = false; 
var is_landscape = false; 
var initial_screen_size = window.innerHeight; 

/* Android */ 
window.addEventListener("resize", function() { 
    is_keyboard = (window.innerHeight < initial_screen_size); 
    is_landscape = (screen.height < screen.width); 

    updateViews(); 
}, false); 

/* iOS */ 
$("input").bind("focus blur",function() { 
    $(window).scrollTop(10); 
    is_keyboard = $(window).scrollTop() > 0; 
    $(window).scrollTop(0); 
    updateViews(); 
}); 

Ahora usted puede mostrar y ocultar el logotipo y alguna partida

function updateViews() { 
    $("li").hide(); 
    if (is_keyboard) { 
     $("#logo").hide(); 
     if (is_landscape) { 
      $("li").slice(0, 2).show(); 
     } 
     else { 
      $("li").slice(0, 4).show(); 
     } 
    } 
    else { 
     $("#logo").show(); 
     $("li").show(); 
    } 
} 

Para la JS basan en este HTML

<div id="logo">Logo</div> 
<input type="text"><input type="submit" value="search"> 
<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

Salida my example page