En el ámbito del desarrollo web nos encontramos con muchos problemas por la cantidad de dispositivos con diferentes características que tenemos que soportar. En este caso en concreto vamos a dar solución a una dificultad relacionada con los tamaños de pantalla, los teclados virtuales y los campos de los formularios.

Cuando los teclados virtuales aparecen en pantalla pueden llegar a ocultar el campo del formulario que acaba de tocar el usuario. Para evitar esto tenemos que hacer que la página se desplace hasta el campo de la siguiente forma:

Pero nos encontramos con otro problema si el input se encuentra en la parte inferior del documento, en este caso realizará el scroll hasta el final y mostrará el teclado virtual ocultando el campo. Una posible solución es crear una sección vacía en nuestro html (en nuestro caso le aplicamos la clase “keyboard-space” para comodidad a la hora de acceder a ella):

Esta sección deberá situarse al final del documento, después del campo:

Por útimo solo nos queda darle un tamaño a esta sección parecido al del teclado virtual para que no tape el campo:

 

Espero que os haya sido de utilidad esta pequeña solución para la usabilidad de vuestras webs.