Los teléfonos modernos tienen bordes redondeados, cámaras recortadas, islas dinámicas e indicadores de inicio que pueden ocultar el contenido. El área segura (safe area) es la porción de la pantalla libre de la interfaz del sistema. Las variables CSS env(safe-area-inset-) proporcionan las dimensiones de estas áreas para que los desarrolladores adapten sus diseños. Para usarlas, primero se debe incluir viewport-fit=cover en la metaetiqueta viewport, lo que permite que el contenido ocupe toda la pantalla y responsabiliza al desarrollador de evitar obstrucciones. Luego, se aplican paddings con las variables env(). Por ejemplo, body { padding-top: env(safe-area-inset-top); ... }. Es importante no solo usar el valor de la inserción, sino añadir un margen propio mediante calc() para que el contenido no quede pegado a la interfaz. Estas variables solo tienen valores distintos de cero en dispositivos móviles; en escritorio devuelven 0. Herramientas como Polypane emulan estas inserciones para facilitar el desarrollo. Un caso común son los botones flotantes que pueden quedar detrás del indicador de inicio; con env() se reposicionan correctamente. La especificación también prevé safe-area-max-inset-, aunque aún no tiene soporte amplio. En resumen, aplicar safe-area-inset garantiza que el contenido importante no quede oculto y mejora la experiencia de usuario en dispositivos móviles.
Safe-area-inset: cómo construir diseños móviles seguros
