Publicado: 28 de febrero de 2025
De borde a borde es una función de Android que permite que las aplicaciones abarquen todo el ancho y el alto de la pantalla dibujando detrás de las barras del sistema de Android.
Antes de Chrome 135, Chrome en Android no se renderizaba de borde a borde. En esta guía, se explica el efecto que tiene este cambio en los sitios web y lo que puedes hacer como desarrollador para adoptarlo.
Barras en todas partes
Android incluye barras del sistema que proporciona el propio sistema operativo.
En conjunto, la barra de estado, la barra de subtítulos y la barra de navegación se denominan barras del sistema. Muestran información importante, como el nivel de batería, la hora y las alertas de notificaciones, y proporcionan interacción directa con el dispositivo desde cualquier lugar.
En la parte superior de la pantalla, se encuentra la barra de estado, que contiene íconos de notificaciones y del sistema.
En la parte inferior de la pantalla, puedes encontrar la barra de navegación, que te permite controlar la navegación con los controles Atrás, Inicio y Descripción general. Puede ser la navegación clásica de tres botones o la barra de navegación por gestos moderna.
Además de las barras del sistema de Android, Chrome incluye una barra de direcciones que se expande y se contrae de forma dinámica a medida que te desplazas.
Chrome se muestra de borde a borde
Cuando visitas un sitio web, este se presenta en un rectángulo conocido como el viewport (de diseño).
En Chrome para Android, antes de Chrome 135, ese viewport de diseño se dibuja entre la barra de estado superior y la barra de navegación por gestos inferior. La presencia de la barra de direcciones de Chrome (o la falta de ella) puede afectar el tamaño del viewport, pero este nunca se expandirá a la barra superior del sistema ni a la barra de navegación por gestos inferior.
A partir de Chrome 135, se permite que el viewport se extienda a la barra de navegación por gestos de Android. Este es el comportamiento que se describe como borde a borde.
Comportamiento de Chrome sin el modo de borde a borde
En la siguiente grabación, se muestra Chrome en Android sin compatibilidad con el modo de borde a borde. La barra de direcciones de Chrome (en la parte superior) se quita de forma dinámica a medida que se desplaza la página. Sin embargo, la barra de estado superior nativa de Android y la barra de navegación nativa de Android en la parte inferior permanecen fijas en su lugar.
Aquí, el tamaño del viewport de diseño cambia a medida que la barra de direcciones de Chrome se retrae o se expande.
Comportamiento de Chrome con el diseño de borde a borde
A partir de Chrome 135, Chrome puede dibujar contenido web hasta el borde inferior del dispositivo extendiendo el viewport al área de la barra de navegación por gestos.
Diseño dinámico de borde a borde con "el mentón"
De forma predeterminada, el modo de pantalla completa de Chrome muestra una nueva barra inferior dinámica conocida como "la barra inferior" sobre el área de la barra de navegación por gestos. Al igual que la barra de direcciones de Chrome, esta barra inferior se desplaza cuando comienzas a desplazarte y afecta el tamaño de la ventana de visualización.
En la siguiente grabación de Chrome en Android con compatibilidad de borde a borde, tanto la barra de direcciones de Chrome como la barra inferior se retraen de forma dinámica a medida que se desplaza la página hacia abajo. Esto hace que el viewport se expanda, lo que permite que el contenido web se dibuje hasta el borde inferior del dispositivo.
Este comportamiento de la barra inferior es el nuevo comportamiento predeterminado de Chrome a partir de Chrome 135.
Habilitación del formato de borde a borde de forma predeterminada con una opción de habilitación
Los sitios web que se crearon para el diseño de borde a borde pueden indicarlo modificando la metaetiqueta viewport. Cuando se habilita, el viewport se extiende hasta el borde inferior de forma predeterminada sin que se vea el marco inferior.
Una página puede indicar que admite el modo de borde a borde con la metaetiqueta viewport y su clave viewport-fit.
Para habilitar el diseño de borde a borde, establece viewport-fit en el valor de cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Obtén más información sobre los distintos valores de viewport-fit en MDN.
Cómo lidiar con el contenido que podría quedar obstruido por la barra de navegación por gestos
En el modo de borde a borde, debes tener en cuenta cualquier contenido que pueda quedar obstruido por la barra de navegación por gestos.
En la mayoría de los casos, no necesitarás hacer nada porque la barra inferior se aparta por sí sola. Los usuarios aún pueden acceder a todo el contenido de tu sitio web como lo hacían antes.
Sin embargo, si habilitas la opción de ir de borde a borde de forma predeterminada o tienes un elemento que se encuentra en la parte inferior del viewport, es posible que debas tener en cuenta que ese contenido podría estar cubierto.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Cuando la barra inferior esté presente, los usuarios podrán acceder al contenido inicialmente, pero la barra de navegación de Android lo obstruirá a medida que desaparezca.
Para mitigar este problema, usa las inserciones de área segura para colocar siempre los elementos afectados por encima de la barra de navegación por gestos inferior nativa de Android o para que su fondo se extienda a esa área.
Los márgenes del área segura
Las inserciones de área segura son cuatro variables de entorno que definen un rectángulo por sus inserciones superior, derecha, inferior e izquierda desde el borde de la ventana de visualización.
Combinados, estos cuatro valores forman el rectángulo del área segura en el que se puede colocar contenido de forma segura para que no se vea obstruido por elementos como la barra de navegación por gestos de Android.
Usa el margen inferior del área segura
En el caso de los elementos que se posicionan en la parte inferior del viewport, usa safe-area-inset-bottom como el valor de la propiedad bottom para evitar que se posicionen debajo de la barra de navegación por gestos. El valor que devuelve safe-area-inset-bottom se actualiza de forma dinámica a medida que se mueve el mentón, lo que hace que los elementos ubicados en la parte inferior permanezcan por encima de la barra de navegación por gestos de Android.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom. Cuando la barra inferior es visible, la barra se ubica sobre la barra de navegación por gestos de Android. Cuando desaparece el borde inferior, el elemento también se ubica por encima de él.Como puedes ver en las ilustraciones, el resultado aún no es perfecto: cuando se quita la barra inferior, el resto del contenido de la página se vuelve visible en el área de la barra de navegación por gestos. Esto se debe a que, en este estado, el viewport se extiende al área de la barra de navegación por gestos.
Para evitar que el contenido se dibuje debajo del contenido fijado en la parte inferior, un enfoque de uso frecuente es establecer el padding-bottom en el safe-area-inset-bottom. De esa manera, el elemento fijado en la parte inferior crece automáticamente a medida que se oculta la barra inferior. Si bien esto funciona, no se recomienda este enfoque, ya que genera una sobrecarga de diseño mientras se mueve la barra inferior.
No establezcas el padding en un valor de inserción de área segura.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}
Usa el margen inferior del área segura y el margen inferior máximo del área segura
En cambio, el enfoque recomendado es usar una combinación de safe-area-inset-bottom y safe-area-max-inset-bottom. A diferencia del safe-area-inset-bottom dinámico, que se actualiza de forma dinámica a medida que se mueve la barra inferior, el safe-area-max-inset-bottom representa el valor máximo del safe-area-inset-bottom.
Usa este safe-area-max-inset-bottom para aumentar el tamaño del elemento anclado en la parte inferior y combínalo con safe-area-inset-bottom para bajar el elemento de modo que quede detrás de la barbilla.
Usa safe-area-max-inset-bottom junto con safe-area-inset-bottom.
:root {
--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
--bottom-bar-height: 50px;
}
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
height: var(--bottom-bar-height);
padding-bottom: var(--safe-area-max-inset-bottom);
bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}
body {
padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}
Prueba una demostración en vivo
El resultado visual es el mismo que el del enfoque de padding-bottom: env(safe-area-inset-bottom, 0px);, pero tiene un rendimiento mucho mejor. Como solo debe cambiar el valor calculado para bottom a medida que se aleja la barra inferior, no se produce una destrucción del diseño.
Prueba el diseño de borde a borde antes de Chrome 135
Para probar el diseño de borde a borde antes de su lanzamiento estable público, debes habilitar varias marcas de funciones de Chrome a través de chrome://flags:
EdgeToEdgeBottomChin(si lo configuras como "Enabled Debug", la mitad de la barra inferior se coloreará de rosa para distinguirla con mayor claridad de otros elementos de la IU)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(no lo configures como "Enabled", sino como "Enabled Dispatch yOffset")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(no lo configures como "Habilitado", sino como "Habilitado con variación desplazable")
Asegúrate de que las siguientes marcas no estén habilitadas:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Reinicia Chrome dos veces.
Deseamos obtener sus comentarios
Si tienes comentarios sobre Chrome y su implementación de borde a borde, comunícate con nosotros enviando un error de Chromium en el componente "IU > Navegador > Dispositivos móviles > EdgeToEdge". Agradecemos tus comentarios.