Cambio de tamaño de la barra de URL

David Bokan

El comportamiento de cambio de tamaño de la barra de URL cambiará en Chrome en Android a partir de la versión 56. Esto es lo que debes saber:

Las longitudes definidas en unidades de viewport (es decir, vh) no cambiarán de tamaño en respuesta a la barra de URL que se muestre o se oculte. En cambio, las unidades vh se ajustarán a la altura del viewport, como si la barra de URL estuviera siempre oculta. Es decir, se ajustará el tamaño de las unidades vh según el “viewport más grande posible”. Esto significa que 100vh será mayor que la altura visible cuando se muestre la barra de URL.

El bloque contenedor inicial (ICB) es el bloque contenedor raíz que se usa cuando se define el tamaño de los elementos en relación con los elementos superiores. Por ejemplo, si le otorgas al elemento <html> un estilo de width: 100%; height: 100%, tendrá el mismo tamaño que el ICB. Con este cambio, el ICB no cambiará de tamaño cuando la barra de URL esté oculta. Por el contrario, se mantendrá la misma altura, como si la barra de URL se mostrara siempre ("la ventana gráfica más pequeña posible"). Eso significa que un elemento cuyo tamaño sea la altura de ICB no llenará por completo la altura visible mientras la barra de URL esté oculta.

Hay una excepción a los cambios anteriores y es para los elementos que son position: fixed. Su comportamiento no cambia. Es decir, un elemento position: fixed cuyo bloque contenedor es el ICB cambiará de tamaño en respuesta a la barra de URL que se muestre o se oculte. Por ejemplo, si su altura es 100%, siempre rellenará exactamente la altura visible, sin importar si se muestra o no la barra de URL. Del mismo modo, para las longitudes de vh, también cambiará de tamaño para coincidir con la altura visible, teniendo en cuenta la posición de la barra de URL.

Este cambio se debe a varios motivos:

  • Unidades vh utilizables en dispositivos móviles. Antes de esto, el uso de unidades vh implicaba que una página se redistribuía de forma incorrecta cada vez que el usuario cambiaba la dirección de desplazamiento.

  • Mejor experiencia del usuario. Si una página se reorganiza mientras el usuario está leyendo, es posible que pierda su ubicación relativa en el documento. Esto es frustrante, pero también genera un uso adicional del procesador y agota la batería para cambiar el diseño y volver a pintar la página.

  • Se mejoró la interoperabilidad con Safari en iOS. El nuevo modelo debería coincidir con el comportamiento de Safari para que la vida de los desarrolladores web sea más sencilla. La opción poco intuitiva de hacer que las unidades vh tengan el viewport más grande posible, pero el ICB al más pequeño posible, es que coincida con el comportamiento de Safari.

En los casos de pantalla completa, en los que la barra de URL está bloqueada en un estado oculto, el CB usará la altura de la pantalla completa. Esto es coherente con las definiciones anteriores, ya que "el viewport más pequeño posible" será el viewport completo, ya que la barra de URL no se muestra durante el desplazamiento.

Demostración

  • Esta es una demostración. Las cuatro barras que aparecen a la derecha de la página son todas las combinaciones posibles de 99%, 99vh, position:fixed y position:absolute que se proporcionan en una página desplazable. Ocultar la barra de URL muestra cómo afecta a cada una. Los eventos de cambio de tamaño se imprimen en la página.

Asistencia

  • Chrome 56 en Android