0
192
Vistas¿Cómo ajustar dinámicamente la altura de un div desplazable cuando el teclado se muestra y se descarta en el navegador móvil?
Tengo un div desplazable en la página web; contiene una lista de elementos que se pueden desplazar hacia arriba y hacia abajo.
En el navegador móvil (como Chrome en Android, Safari en iOS), cuando se muestra el teclado, el problema que tengo es que los elementos inferiores en el div desplazable están cubiertos por el teclado, y el desplazamiento hacia arriba no puede mostrar todos los elementos por encima del teclado. . Siempre hay un par de elementos debajo del borde superior del teclado.
lo que quiero es:
- el div ajusta su altura cuando se muestra el teclado, y siempre por encima del borde superior del teclado, por lo que el teclado no cubrirá la lista. Como lo demuestra la "altura 1" en el borrador de la captura de pantalla.
- Y cuando se descarta el teclado, quiero que la altura del div vuelva a la pantalla completa nuevamente. Como lo demuestra la "altura 2" en el borrador.
Traté de usar window.visualViewport.height o window.innerHeight para recuperar la altura visible, pero el valor no parece correcto.
¿Alguien sabe la forma correcta de escuchar el evento mostrar/descartar del teclado y sabe cómo ajustar correctamente la altura del div?
1 Respuestas
Responde la pregunta0
No estoy seguro de que haya una buena manera de hacer esto solo con css. podría ser posible usar una consulta de medios y hacer algo como
@media screen and (orientation: landscape) { .scroll_div{height: 50% !important;} }No estoy seguro de que funcione en todos los dispositivos, porque no todos los dispositivos móviles cambian a paisaje cuando se eleva el kb.
Otra posibilidad con css podría ser hacer algo como
@media all and (max-height: 700px) { .scroll_div{height: 50%;} }Elegí el 50 %, pero es posible que eso tampoco funcione en su aplicación. Puede establecer un valor estático que sepa que es una altura aceptable para sus usos cuando se muestra el kb.
Pude ver que una opción de jquery podría parecerse a
$document.ready(function(){ $kb_shown = false; $scrollDivHeight = $('.scroll_div').height(); $(window).resize(function(){ if(kb_shown == false){ $('.scroll_div').height($scrollDivHeight / 2)); $kb_shown = true; } else{ $('.scroll_div').height($scrollDivHeight); $kb_shown = false; } }); });También uso browserstack.com para poder probar cosas como esta en cualquier dispositivo móvil que elija. Evita tener que tener un cubo de dispositivos móviles alrededor.
Hasta donde yo sé, no hay forma de detectar el evento kb directamente, ya que es parte del sistema operativo y no del navegador.
Espero que esto te ayude a orientarte en la dirección correcta. Avísame si tienes más preguntas.
Editar: hay algunos marcos de trabajo receptivos móviles que ya manejan esto como boostrap , Skeleton , Boilerplate y muchos más.