'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web.
El proyecto tiene 15 áreas de enfoque y una de ellas es añadir más unidades de tamaño de la ventana gráfica, para que haya mayor compatibilidad entra navegadores y dispositivos móviles.
Nuevas unidades
Antes solo teníamos "vh" y "vw" para establecer el tamaño de la ventana gráfica, ahora contamos con tres unidades más que nos ayudaran mucho a facilitarnos la creación de diseños para cualquier dispositivo sobre todo para los móviles ya que a día de hoy es con los dispositivos con los que más navegamos.
Large viewport (lvh y lvw)
La ventana grande es la que no muestra ninguna interfaz dinámica del navegador.
En un dispositivo móvil, 100lvh y 100lvw equivaldría al tamaño entero de la pantalla sin ningún elemento del navegador.
Small viewport (svh y svw)
La ventana pequeña es en la que se muestran todas las interfaces del navegador, por lo que 100svh y 100svw tendrá el tamaño exacto para que quepa dentro de la interfaz.
Esta unidad es ideal cuando se intenta mantener un tamaño relativo a la ventana gráfica y a la vez tener en cuenta los elementos activos del navegador.
Dynamic viewport (dvh y dvw)
Funciona como una combinación de los anteriores.
La ventana se redimensiona cuando los elementos de interfaz del navegador aparecen o se esconden. Este conjunto de unidades es muy útil para que los elementos se adapten automaticamente en función de la navegación.
Compatibilidad
Más del 85% de los navegadores es compatible con estas unidades de medida, así que se pueden aplicar ya para casi cualquier caso sin problemas.
Puedes verlo en: caniuse.com
Conclusión
Es innegable que estás nuevas medidas de tamaño son y cada vez serán más útiles debido a que facilitarán la creación de diseños que llenen la ventana visible en dispositivos móviles teniendo en cuenta la barra de direcciones.
Espero que te haya resultado útil, muchas gracias!
