La tastiera del sistema operativo Android sposta il contenuto del sito web verso l'alto?

Question

Ho un sito web mobile con 4 elementi che sono posizionati in modo assoluto in un div al 100% di altezza e quando clicco sulla barra dell'URL l'altezza sul div diminuisce e spinge tutto in alto.

Esiste comunque una soluzione per risolvere questo problema? O impedirgli di cambiare il 100%? O devo ottenere le dimensioni dello schermo usando JS e sistemarlo in questo modo? Come funziona bene se ho impostato su un importo esatto.

Answer 1

Il browser Android ridimensiona la finestra quando viene aperta la tastiera, non c'è soluzione per impedirlo.

Answer 2

ho potuto risolvere questo impostando il z-index a -1 per l'elemento DOM che ottiene nel senso quando il browser Android apre la tastiera sullo schermo, come segue:

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

(Ho fatto questo per un evento onclick nella casella di testo di input), quindi, utilizzando un 'onblur' (cioè quando l'utente fa clic fuori dalla casella di testo/ricerca nella parte superiore dello schermo), riporta lo zindex della barra di navigazione in '1':

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

Answer 3

Risposta di Kevin Pajak ha funzionato per me. è anche possibile utilizzare le media query: di file

your.css:

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

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