Evitar el reflujo de documentos / el tamaño del navegador cuando se abre el teclado de Android

Esto es para un HTML5 / Javascript WebApp, no una aplicación androide nativa.

¿Cómo evito que el navegador / DOM modifique el tamaño de mi contenido (que es sensible, en su mayoría vw / vh para tamaños, etc.), cuando se abre el teclado virtual android? Lo que ocurre es que el contenido, especialmente los tamaños de fuente, cambia una vez que se abre el teclado (en campos de entrada, por ejemplo).

Ya me he puesto

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 

Lo que quiero lograr es, que el teclado actúa como una superposición y el contenido de debajo se convierte desplazable. Así que básicamente, lo que android:windowSoftInputMode haría en un manifiesto android.

También intenté escuchar el evento de redimensionamiento de ventana y evitarlo, cuando la cantidad de cambio de tamaño está en un cierto rango (vea esta respuesta a otra pregunta). Pero lo que sucede aquí, es el teclado se abre e inmediatamente después se cierra de nuevo. (*)

Así que mis ideas básicas son:

  • Evitar que el navegador calcula los nuevos tamaños (como si no hubiera cambiado el tamaño)
  • Configurar el teclado para que actúe como una superposición, no un elemento individual que cambia el tamaño de la ventana
  • Mantener el teclado abierto en mi método de prevent-resize (ya probado) (*)

Pero no puedo encontrar una solución de trabajo para ninguno de estos.

Ok, esto es arreglar para la aplicación html5 (navegador).

 var isKeyboardOpen = false; //Override onresize event if you have it already just insert code // also you can check id of element or any other parameters if ( document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "input" ) { // regular onresize } else{ // avoid resize } 

// Para comprobar si es teclado abierto use este código

Window.addEventListener ('native.showkeyboard', keyboardShowHandler);

 window.addEventListener('native.hidekeyboard', keyboardHideHandler); function keyboardShowHandler(e){ isKeyboardOpen = true; //always know status } function keyboardHideHandler(e){ isKeyboardOpen = false; } 

Intentar inicialmente prevenir mediante el establecimiento de la bandera:

 var object = document.getElementById("IwillOpenKeyboardOnMobile") object.addEventListener("focus", ONFOCUSELEMENT); function ONFOCUSELEMENT() { isKeyboardOpen = true; } // opposite event is blur 
  • Escribir datos en USB HID usando Javascript, HTML5 o cualquier lenguaje de plataforma cruzada (compatible con Android)
  • En la vista Web de Android, ¿puedo modificar el DOM de una página web?
  • Comunicación punto a punto entre la aplicación móvil y el navegador de PC
  • Mensajería en la nube de Google (fake_message_id)
  • facingMode en MediaDevices.getUserMedia no parece funcionar en el último Android Chrome (v53)
  • JQuery indicador de actividad móvil no se muestra en android
  • Servidor JSCallback cerrado: detener devoluciones de llamada
  • Cambiar el tamaño de elementos HTML en el cambio de orientación de Android
  • Marcador de Smartphone
  • Cómo abrir un servidor HTTP en reaccionar nativo
  • Inyección de Javascript en la vista web
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.