El teclado del sistema operativo Android mueve los contenidos del sitio web hacia arriba?

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

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

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

Pude resolver esto estableciendo el índice z en -1 para el elemento DOM que interfiere cuando el navegador de Android hace aparecer 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, utilizando 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 índice del índice 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"; } } 

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

su archivo.css:

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

Similar a Charlie Carver, excepto que usa max-height y display: none

Probado en Galaxy S7 y iPhone 6s

 .hide-element-on-keyboard { display:normal; } @media screen and (max-height: 550px) { .hide-element-on-keyboard { display: none; } }