Tastiera virtuale nasconde i campi/textareas/contenteditable (nascosto sotto la tastiera)

Question

So che ci sono già alcuni thread StackOverflow sul problema che la tastiera virtuale dei telefoni cellulari nasconde o sovrappone campi di input, aree di testo e così via. Ma tutti questi thread sono stati inutili, ho cercato molto ma molti hanno parlato di questo problema basato sullo sviluppo di Android e anche alcuni basati sullo sviluppo web.

Mi concentro sullo sviluppo web. Il problema è che non esiste un thread in cui il problema sia stato risolto o che sia stata data/pubblicata una risposta veramente utile.

Così ho iniziato questo con la speranza che sarà risolto ora. Quindi ora qual è il problema direttamente?

Se si fa clic su un'area in cui è possibile inserire qualcosa, su un dispositivo mobile, solitamente ci si aspetta che il sito si sposti e la tastiera virtuale si apra dopo l'area modificabile, ma ciò che accade non è così. La tastiera virtuale si apre come una sovrapposizione: inizia sovrapponendosi all'area modificabile.

Nel mio caso, apro un dialogo dell'interfaccia utente jQuery in cui si trovano i miei campi, ma penso che ciò non dovrebbe avere importanza.

Così ho lasciato che i miei pensieri si incrociassero e arrivassi alla soluzione per aggiungere ulteriore spazio. Qualcosa del genere: JSFiddle.

Quindi sono in grado di scorrere verso il basso. Ma questo è fastidioso in quanto è inutile o con altre parole non necessarie per le persone che non utilizzano un dispositivo che apre una tastiera virtuale. Così ho pensato a una funzione come questa:

function isMobileDevice() { 
    var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone"); 
    var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad"); 
    var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod"); 
    var isAndroid = navigator.userAgent.toLowerCase().indexOf("android"); 
    if (isiPhone > -1 || isiPad > -1 || isiPod > -1 || isAndroid > -1) { 
     return true 
    } else { 
     return false; 
    } 
} 

Bene, per questa parte sarebbe la mia domanda ho dimenticato un dispositivo, che apre anche una tastiera virtuale e la questione primaria sarebbe c'è qualcos'altro tranne la mia soluzione ? Non ho trovato qualcosa per riconoscere esplicitamente la tastiera virtuale.

Edit 2015/04/24:

Ragazzi ho appena provato con un Samsung Galaxy Note e le versioni più recenti del browser mobile Firefox, Chrome e Opera. (! Aggiornato tutti e tre, oggi)

Ok Ecco il mio risultato:

come si può vedere tutti i browser, ad eccezione di Firefox, fallire e questo è l'esempio visivo perfetto del mio problema. La tastiera virtuale si sovrappone all'area modificabile! Di solito, preferisco Chrome su qualsiasi altro browser, ma per questo caso, devo dire - buon lavoro Firefox!

Answer 1

... dagli sguardi delle foto che sono state pubblicate, è necessario utilizzare un elemento scorrevole sovrapposto con height:100% per contenere il contenuto. Ho ragione?

Se è così, questo è il motivo per cui la tastiera virtuale si sovrappone sul suo sito web: tastiere virtuali tendono a spingere i contenuti corpo al fine di concentrarsi su un ingresso e non elementi sorvolato. In questo caso, il contenuto del corpo non si sposta, quindi la tastiera virtuale si sovrappone al tuo contenuto. Non so se gli sviluppatori di Mozilla abbiano dedicato più tempo a questo specifico problema, ma sembra che lo abbiano fatto.

Modifica: ho risposto alla domanda senza prima leggere i commenti, e sembra che avessi già commentato, ma sembra che il mio commento sia stato ignorato - mi chiedo perché, poiché probabilmente sono azzeccato.:/