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 dibujaba de borde a borde. En esta guía, se explica el efecto que tiene este cambio en los sitios web y qué puedes hacer como desarrollador para adoptarlo.
Bares en todas partes
Android incluye barras del sistema proporcionadas por el propio sistema operativo.
En conjunto, la barra de estado, la barra de leyendas 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 permiten la interacción directa con el dispositivo desde cualquier lugar.
En la parte superior de la pantalla, puedes encontrar 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 de atrás, inicio y descripción general. Puede ser la navegación clásica con 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 contrae de forma dinámica a medida que te desplazas.
Chrome se extiende de borde a borde
Cuando visitas un sitio web, este se presenta en un rectángulo conocido como ventana gráfica (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 (o ausencia) de la barra de direcciones de Chrome puede afectar el tamaño del viewport, pero este nunca se expandirá a la barra del sistema superior ni a la barra de navegación por gestos inferior.
A partir de Chrome 135, se permite que la ventana gráfica 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 borde a borde
En la siguiente grabación, se muestra Chrome en Android sin compatibilidad de borde a borde. La barra de direcciones de Chrome (en la parte superior) se quita dinámicamente 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 de la ventana gráfica de diseño cambia a medida que la barra de direcciones de Chrome se retrae o expande.
Comportamiento de Chrome con borde a borde
A partir de Chrome 135, Chrome puede dibujar contenido web hasta el borde inferior del dispositivo extendiendo la ventana gráfica al área de la barra de navegación por gestos.
Dinámico de borde a borde con "la barbilla"
De forma predeterminada, Chrome de borde a borde muestra una nueva barra inferior dinámica conocida como "la barbilla" sobre el área de la barra de navegación por gestos. Al igual que la barra de direcciones de Chrome, esta parte inferior se quita cuando comienzas a desplazarte y afecta el tamaño de la ventana gráfica.
En la siguiente grabación de Chrome en Android con compatibilidad de borde a borde, tanto la barra de direcciones como la mentonera de Chrome 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 barbilla es el nuevo comportamiento predeterminado de Chrome a partir de la versión 135.
Formato de borde a borde de forma predeterminada con una opción para habilitarlo
Los sitios web creados para borde a borde pueden indicarlo modificando la etiqueta meta viewport. Cuando se habilita, el viewport se extiende hasta el borde inferior de forma predeterminada sin que se vea la barbilla.
Una página puede indicar que admite el diseño de borde a borde con la metaetiqueta viewport y su clave viewport-fit.
Para habilitar el borde a borde, establece viewport-fit en el valor de cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /
Obtén más información sobre los distintos valores de viewport-fit en MDN.
Cómo controlar 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, ya que la barbilla inferior se quita sola. Los usuarios pueden seguir accediendo a todo el contenido de tu sitio web como lo hacían antes.
Sin embargo, si habilitas la opción de borde a borde de forma predeterminada o tienes un elemento posicionado en la parte inferior de la ventana gráfica, es posible que debas tener en cuenta que ese contenido podría quedar cubierto.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Cuando la barbilla está presente, los usuarios podrán acceder al contenido inicialmente, pero la barra de navegación de Android lo obstruirá a medida que desaparezca la barbilla.
Para mitigar este problema, usa las inserciones del área segura para colocar siempre los elementos afectados sobre la barra de navegación por gestos inferior nativa de Android o para que su fondo se extienda hacia esa área.
Las inserciones del área segura
Los insertos de área segura son cuatro variables de entorno que definen un rectángulo por sus insertos superior, derecho, inferior e izquierdo desde el borde de la ventana gráfica.
En conjunto, estos cuatro valores forman el rectángulo de zona segura en el que es seguro colocar contenido para que no se obstruya con elementos como la barra de navegación por gestos de Android.
Cómo usar la inserción inferior del área segura
En el caso de los elementos que se posicionan en la parte inferior de la ventana gráfica, usa safe-area-inset-bottom como valor para la propiedad bottom y evita 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 el mentón se quita del camino, lo que hace que los elementos posicionados 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 se ve la barbilla, la barra se ubica sobre la barra de navegación por gestos de Android. Cuando desaparece la barbilla, el elemento también se ubica por encima de ella.Como puedes ver en las ilustraciones, el resultado aún no es perfecto: cuando se quita el mentón, el contenido restante de la página se hace visible en el área de la barra de navegación por gestos. Esto se debe a que, en este estado, la ventana gráfica se extiende hacia el área de la barra de navegación por gestos.
Para evitar que el contenido se pinte debajo del contenido anclado en la parte inferior, un enfoque de uso frecuente es establecer padding-bottom en safe-area-inset-bottom. De esa manera, el elemento anclado en la parte inferior crece automáticamente a medida que se oculta el mentón. Si bien esto funciona, no se recomienda este enfoque, ya que genera layout thrashing mientras el mentón se quita del camino.
No establezcas 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. */
}
Cómo usar la inserción inferior del área segura y la inserción inferior máxima 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 el mentón se quita del camino, el safe-area-max-inset-bottom representa el valor máximo del safe-area-inset-bottom.
Usa este safe-area-max-inset-bottom para hacer crecer el elemento anclado en la parte inferior por adelantado y combínalo con safe-area-inset-bottom para tirar del elemento hacia abajo de modo que quede detrás del mentón.
Usa safe-area-max-inset-bottom en combinación 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));
}
Probar una demostración en vivo
El resultado visual es el mismo que el del enfoque padding-bottom: env(safe-area-inset-bottom, 0px);, pero el rendimiento es mucho mejor. Como solo debe cambiar el valor calculado de bottom a medida que se aleja el mentón, no se produce un thrashing de diseño.
Prueba la función de borde a borde antes de Chrome 135
Para probar el diseño de borde a borde antes de su lanzamiento público estable, debes habilitar varias funciones experimentales de Chrome a través de chrome://flags:
EdgeToEdgeBottomChin(opcionalmente, si lo configuras como "Habilitar depuración", se coloreará la mitad de la barbilla en rosa para distinguirla con mayor claridad de otros elementos de la IU)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(no se debe establecer en "Habilitado", sino en "Habilitar Dispatch yOffset")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(no configures "Enabled", but configures "Enabled Scrollable Variation")
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, informa un error de Chromium en el componente "UI > Browser > Mobile > EdgeToEdge". Agradecemos tus comentarios.