Teclado del sistema operativo Android mueve el contenido del sitio web hacia arriba?

Question

Tengo un sitio web móvil con 4 elementos que están absolutamente posicionados dentro de una div del 100% de altura y cuando hago clic en la barra de direcciones, la altura en el div se reduce y empuja todo hacia arriba.

¿Hay alguna forma de solucionar este problema? ¿O evitar que cambie el 100%? ¿O necesito obtener el tamaño de la pantalla usando JS y arreglarlo de esa manera? Como funciona bien si lo configuro en una cantidad exacta.

Answer 1

El navegador de Android cambia el tamaño de la ventana cuando se abre el teclado, no hay una solución para evitar eso.

Answer 2

que era capaz de resolver esto estableciendo el índice z a -1 para el elemento DOM que se interpone en el camino cuando el navegador de Android aparece el teclado en la pantalla, de la siguiente manera:

function hideNavbar() // needed for Android browser pushing up keyboard 
{ 
    if (screen.height <= 480) // mobile 
    { 
     document.getElementById('navbar').style.zIndex = "-1"; 
    } 
} 

(Hice esto para un evento onclick en el cuadro de texto de entrada), luego, usando un 'onblur' (es decir, cuando el usuario hace clic fuera del cuadro de texto/búsqueda en la parte superior de la pantalla), devuelva el zindex de la barra de navegación a '1':

function showNavbar() // needed for Android browser pushing up keyboard 
{ 
    if (screen.height <= 480) // mobile 
    { 
     document.getElementById('navbar').style.zIndex = "1"; 
    } 
} 

Answer 3

La respuesta de Kevin Pajak funcionó para mí. también puede utilizar las consultas de medios: archivos

your.css:

.hide-element-on-keyboard { 
    z-index: 1; 
} 

@media screen and (min-height: 300px) { 
    .hide-element-on-keyboard { 
     z-index: -1; 
    } 
}