Se usó la API de Cloud Translation para traducir esta página.

Guía de migración de Chrome en Android de borde a borde

Bramus

Fecha de publicación: 28 de febrero de 2025

De extremo a extremo es una función de Android que permite que las aplicaciones abarquen todo el ancho y la altura de la pantalla dibujando detrás de las barras del sistema de Android.

Antes de Chrome 135, Chrome para Android no dibujaba de borde a borde. En esta guía, se explica el efecto que este cambio tiene en los sitios web y lo que puedes hacer como desarrollador para adoptarlo.

Bares en todas partes

Android incluye barras del sistema que proporciona 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 proporcionan 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.

Ilustración de la parte superior de un dispositivo Android con la barra del sistema destacada. — La barra de estado en Android destacada *(source)*.

En la parte inferior de la pantalla, encontrarás 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 de tres botones o la barra de navegación por gestos moderna.

Ilustración de la parte inferior de un dispositivo Android con la barra de navegación por gestos visible. — La barra de navegación por gestos *(source).*

Además de las barras del sistema de Android, Chrome incluye una barra de direcciones que se expande y se retrae 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 viewport (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 de 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 del sistema superior ni a la barra de navegación de gestos inferior.

Ilustraciones de un dispositivo Android con Chrome para Android que no es de pantalla completa. En la ilustración de la izquierda, se muestra Chrome con la barra de direcciones expandida. Entre la barra de direcciones y la barra de navegación de gestos, hay un cuadro destacado en verde cuyo tamaño es de 100 svh. En la ilustración de la derecha, se muestra Chrome con la barra de direcciones retraída. Entre la barra de estado y la barra de navegación de gestos, hay un cuadro destacado en verde cuyo tamaño es de 100 lvh. El viewport en sí tiene un contorno azul discontinuo. — El tamaño mínimo y máximo del viewport en Chrome para Android anterior a Chrome 135. Estos tamaños se conocen como viewport pequeño y grande. El viewport tiene un contorno azul discontinuo.

A partir de Chrome 135, el viewport puede extenderse a la barra de navegación de gestos de Android. Este es el comportamiento que se describe como borde a borde.

Ilustraciones del viewport en Chrome para Android que no es de borde a borde (a la izquierda) y en Chrome para Android que es de borde a borde (a la derecha). Cada visualización tiene un cuadro azul que representa un elemento con un tamaño de 100 vh de altura. El texto de la izquierda aclara lo que sucede cuando el borde de la pantalla no es de extremo a extremo. Dice "El viewport permanece sujeto entre la barra de estado superior y la barra de navegación de gestos inferior". El texto de la derecha aclara lo que sucede cuando el marco de la ventana es de borde a borde. Dice "El viewport se extiende a la barra de navegación por gestos". — El viewport grande que se muestra en Chrome para Android no es de borde a borde (izquierda) y en Chrome es de borde a borde (derecha). En Chrome con compatibilidad con pantalla completa, el viewport se extiende al área de la barra de navegación de gestos cuando se retraen las barras de herramientas dinámicas de Chrome.

Comportamiento de Chrome sin el modo de borde a borde

En la siguiente grabación, se muestra Chrome para Android sin compatibilidad con el modo de pantalla completa. 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.

Comportamiento anterior: Chrome en Android sin compatibilidad con el diseño de pantalla completa y https://developer.chrome.com/ cargado.

Aquí, el tamaño del viewport del diseño cambia a medida que la barra de direcciones de Chrome se retrae o se expande.

Comportamiento de Chrome con el modo 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 de gestos.

Borde a borde dinámico con "barbilla"

De forma predeterminada, el modo de pantalla completa de Chrome muestra una nueva barra inferior dinámica conocida como "la barbilla" sobre el área de la barra de navegación de gestos. Al igual que la barra de direcciones de Chrome, esta barra se mueve cuando comienzas a desplazarte y afecta el tamaño de la vista del cliente.

En la siguiente grabación de Chrome para Android con compatibilidad de pantalla completa, la barra de direcciones de Chrome y la barbilla se retraen de forma dinámica a medida que la página se desplaza hacia abajo. Esto hace que el viewport se expanda, lo que permite que el contenido web se dibuje hasta el borde inferior del dispositivo.

Nuevo comportamiento: Chrome en Android con compatibilidad de borde a borde y https://developer.chrome.com/ cargado. Observa cómo la barbilla inferior se desliza a medida que se desplaza la página.

Este comportamiento de mentón es el nuevo comportamiento predeterminado de Chrome a partir de Chrome 135.

Formato de borde a borde de forma predeterminada con solicitud de aceptación

Los sitios web que se compilaron para el modo de pantalla completa pueden indicarlo ajustando la metaetiqueta viewport. Cuando se habilita, el viewport se extiende hasta el borde inferior de forma predeterminada sin que el mentón sea visible.

Nuevo comportamiento con la habilitación de borde a borde: El viewport se extiende hasta el borde inferior cuando se carga la página. No hay mentón.

Una página puede indicar que admite el diseño de pantalla completa con la metaetiqueta viewport y su clave viewport-fit.

Para habilitar el modo de pantalla completa, 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 diferentes valores de viewport-fit en MDN.

Cómo abordar el contenido que podría obstruirse con la barra de navegación por gestos

En el modo de pantalla completa, debes tener en cuenta el contenido que podría obstruirse con la barra de navegación por gestos.

En la mayoría de los casos, no necesitarás hacer nada porque la barbilla inferior se mueve por sí sola. Los usuarios pueden acceder a todo el contenido de tu sitio web como lo hacían antes.

Sin embargo, si habilitas el modo de pantalla completa 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 el mentón está presente, los usuarios pueden acceder al contenido inicialmente, pero la barra de navegación de Android lo obstruye a medida que desaparece.

Ilustraciones de un dispositivo Android con Chrome para Android que ocupa toda la pantalla. En la ilustración de la izquierda, se muestra Chrome con la barbilla visible. El contenido anclado en la parte inferior (que se muestra en rojo) se encuentra justo encima de él. En la ilustración de la derecha, se muestra Chrome sin la barbilla visible. Allí, el contenido anclado en la parte inferior se encuentra contra el borde inferior del dispositivo. El texto que lo acompaña aclara que la barra de navegación por gestos ahora obstruye el contenido ubicado en la parte inferior. — Ilustración de un sitio web con un elemento ubicado en la parte inferior con "bottom: 0". Cuando el mentón está visible, el elemento ubicado en la parte inferior se encuentra sobre la barra de navegación de Android. Cuando la barbilla se aleja, el elemento se posiciona detrás de la barra de navegación de Android, que lo oculta parcialmente en ese punto.

Para mitigar el problema, usa las inserciones del área segura para posicionar siempre los elementos afectados sobre la barra de navegación de gestos inferior nativa de Android o para que su fondo se extienda a esa área.

Los recuadros de área segura

Browser Support

Source

Los recortes del área segura son cuatro variables de entorno que definen un rectángulo por sus recortes superior, derecho, inferior y izquierdo desde el borde del viewport.

Combinados, estos cuatro valores forman el rectángulo del área segura en el que es seguro colocar contenido para que no se obstruya con elementos como la barra de navegación de gestos de Android.

Ilustración de un dispositivo Android con Chrome en modo de pantalla completa. La barbilla tiene una vista deslizante. Dentro de Chrome, se muestra el rectángulo de la zona segura, pintado de amarillo. Su borde inferior se encuentra justo encima de la barra de navegación por gestos. En la barra de navegación por gestos, se pinta la parte inferior del viewport de color azul. El texto que lo acompaña indica que el rectángulo del área segura se inserta en el viewport por el elemento safe-area-bottom-inset, que evita que el contenido se pinte debajo de la barra de navegación de gestos. — Ilustración de Chrome en modo de pantalla completa con el viewport y el rectángulo del área segura pintados de amarillo. Debido a que la barbilla está retraída, el inserto inferior del área segura evita que el rectángulo del área segura llegue a la barra de navegación de gestos. Como resultado, verás el visor debajo de esa barra de navegación de gestos.

Cómo usar el inserto inferior del área segura

Para los elementos que se ubican en la parte inferior del viewport, usa safe-area-inset-bottom como valor de la propiedad bottom para evitar que se ubique debajo de la barra de navegación de gestos. El valor que muestra safe-area-inset-bottom se actualiza de forma dinámica a medida que la barbilla se mueve, lo que hace que los elementos ubicados en la parte inferior permanezcan bien por encima de la barra de navegación de gestos de Android.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

Ilustración de un dispositivo Android con Chrome en modo de pantalla completa. En la visualización de la izquierda, se puede ver el mentón y el contenido anclado en la parte inferior se encuentra justo encima de él. En la visualización de la derecha, no se ve la barbilla y el contenido anclado en la parte inferior se ubica en el mismo lugar que el de la izquierda. Esto hace que el contenido normal sea visible debajo de la barra de navegación de gestos. — Ilustraciones de un sitio web con un elemento ubicado en la parte inferior que usa el área segura inferior insertada con la propiedad `bottom`. Cuando el mentón está visible, la barra se encuentra sobre la barra de navegación por gestos de Android. Cuando desaparece la barbilla, el elemento también se coloca encima.

Como puedes ver en las ilustraciones, el resultado aún no es perfecto: cuando se quita la barbilla, el contenido restante de la página se vuelve visible en el área de la barra de navegación de gestos. Esto se debe a que, en este estado, la vista se extiende al área de la barra de navegación de gestos.

Para evitar que el contenido se pinte debajo del contenido anclado en la parte inferior, un enfoque que se usa comúnmente es establecer padding-bottom en safe-area-inset-bottom. De esta manera, el elemento anclado en la parte inferior crece automáticamente a medida que se oculta la barbilla. Si bien esto funciona, no se recomienda este enfoque, ya que genera fragmentación del diseño mientras la barbilla se mueve.

No establezcas padding en un valor de margen de seguridad.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

Cómo usar el recorte inferior del área segura y el recorte inferior máximo del área segura

En su lugar, 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 la barbilla se mueve, 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 elemento anclado en la parte inferior al principio y combínalo con safe-area-inset-bottom para tirar del elemento hacia abajo de modo que se ubique detrás de la barbilla.

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 tiene un mejor rendimiento. Como solo el valor calculado de bottom debe cambiar a medida que la barbilla se aleja, no se produce ningún cambio en el diseño.

Prueba el modo de pantalla completa antes de Chrome 135

Para probar el modo de pantalla completa antes de su lanzamiento estable público, debes habilitar bastantes indicadores de funciones de Chrome a través de chrome://flags:

EdgeToEdgeBottomChin (si lo configuras como "Enabled Debug", se coloreará la mitad de la barbilla de color rosa para distinguirla con mayor claridad de la otra IU)
DrawCutOutEdgeToEdge
BottomBrowserControlsRefactor (no lo configures como "Enabled", sino como "Enabled Dispatch yOffset")
DynamicSafeAreaInsets
DynamicSafeAreaInsetsOnScroll
EdgeToEdgeWebOptIn
DrawKeyNativeEdgeToEdge
EdgeToEdgeSafeAreaConstraint (no lo configures como "Habilitado", sino como "Habilitado para la variación desplazable")

Asegúrate de que las siguientes marcas no estén habilitadas:

DrawNativeEdgeToEdge
EdgeToEdgeEverywhere

Reinicia Chrome dos veces.

Deseamos obtener sus comentarios

Si tienes comentarios sobre Chrome y su implementación de pantalla completa, comunícate con nosotros. Para ello, informa un error de Chromium en el componente "IU > Navegador > Dispositivos móviles > EdgeToEdge". Agradecemos tus comentarios.