Adaptar sección al navegador móvil con CSS (SVH, LVH y DVH)

Portada del artículo de SVH, LVH y DVH

A la hora de definir el tamaño de una sección de una web se puede hacer con CSS de distintas formas. Una de las más corrientes es con la unidad de vh y vw que se refieren al alto y el ancho del viewport, es decir, al tamaño de la pantalla con la que se ve el contenido. Esta unidad se mide en porcentajes, si el valor es 1vh, quiere decir que la sección ocupará el 1% de alto en la pantalla que se visualice el contenido, con independencia del tamaño o el dispositivo. Mientras que si se decide fijar 100vh, la sección ocupará todo el alto de dicha pantalla. Y lo mismo pasa con la unidad vw, referida al ancho del viewport.

Sin embargo, en los navegadores móviles la vista en móvil la vista de la pantalla no siempre es la misma y, por ello, nuestro profesor del Bootcamp Full Stack Web Developer, Sergio Jiménez, explica en el siguiente vídeo cómo solucionarlo.

Como muestra Sergio, los navegadores de los dispositivos móviles cuentan con una o dos zonas, una en la parte superior y otra en la parte inferior, que hacen que cuando aparecen en pantalla no se muestre la sección completa de la pantalla. De esta forma, si optamos por indicar un viewport height de 100, es decir, 100vh, habrá momentos en que las zonas superior e inferior del navegador ocultarán parte de la sección.

Sin embargo, hay soluciones para esto dentro de CSS. Estas son las unidades de medida svh, lvh y dvh.

  • svh – Esta unidad de medida, que significa small viewport height, establece el tamaño de la sección ocupando la menor pantalla visible dentro de las opciones que da el dispositivo. En nuestro caso, en un dispositivo móvil, la sección se ajusta a la pantalla como si estuvieran las dos áreas que aparecen en el navegador en función del scroll. En este sentido, cuando las áreas superior e inferior del navegador están visibles, la sección ocupará toda la pantalla permitida por el navegador, mientras que si no están visibles, la sección será más pequeña que la pantalla. Para ocupar el 100% de la pantalla se utilizaría 100svh.
  • lvh – Este caso es el inverso del anterior, la sección ocupa la mayor parte de la pantalla visible dentro de las opciones que da el dispositivo, de ahí su nombre, large viewport height. Para dispositivos móviles es el mismo caso que utilizar el viewport height tal cual, ya que ocupa el 100% de la pantalla sin tener en cuenta las zonas superior e inferior que aparecen en los navegadores. Sería lo mismo utilizar 100vh que 100lvh.
  • dvh – Por último, el más interesante de todos es el dynamic viewport height, que se adapta de forma dinámica al tamaño de la pantalla visible que hay en cada momento. Es decir, si las áreas superior e inferior del navegador están visibles, la sección se verá como si tuviera aplicada la unidad svh, y si no, se verá como la lvh. Además, la adaptabilidad es bilateral y progresiva, en función de si las zonas del navegador van apareciendo o desapareciendo a la vez que se hace scroll. En el caso móvil, si se establece 100dvh para una sección, esta ocupará el 100% de la pantalla visible y se ajustará a su tamaño en cada momento.

Estas soluciones son recursos muy útiles para portadas que queremos que se vean enteras o formularios en los que queremos controlar la altura. Además, estas unidades de medida son aptas para todos los navegadores móviles y no afectan a la visualización en ordenador.

Si quieres aprender más sobre CSS y conocer todo sobre la web, apúntate a nuestro Bootcamp Full Stack y aprende las tecnologías más demandas.

Otros posts relacionados...

Abrir chat
Hola, estaba visitando esta web (https://socratech.es/blog/adaptar-seccion-al-navegador-movil-con-css-svh-lvh-y-dvh) y me gustaría solicitar información sobre...