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 cuando se muestre o se oculte la barra de URL. En cambio, las unidades vh se ajustarán a la altura del viewport como si la barra de URL siempre estuviera oculta. Es decir, las unidades vh se ajustarán al "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 la raíz que contiene el bloque que se usa cuando se ajusta el tamaño de los elementos en relación con sus elementos superiores. Por ejemplo, darle al elemento <html> un estilo de width: 100%; height: 100% hará que tenga el mismo tamaño que la ICB. Con este cambio, la ICB no cambiará de tamaño cuando la barra de URL esté oculta.
En cambio, se mantendrá la altura, como si siempre se mostrara la barra de URL ("viewport más pequeño posible"). Esto significa que un elemento con el tamaño indicado en 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, que es para los elementos que son position: fixed. Su comportamiento no cambia. Es decir, un elemento position:
fixed cuyo bloque que lo contiene es el ICB cambiará de tamaño en respuesta a que se muestre u oculte la barra de URL. Por ejemplo, si su altura es 100%, siempre rellenará con exactitud la altura visible, independientemente de si se muestra o no la barra de URL. De manera similar, para las longitudes vh, también cambiarán de tamaño para que coincidan con la altura visible, teniendo en cuenta la posición de la barra de URL.
Existen varios motivos para este cambio:
Se pueden usar
vhunidades en dispositivos móviles. Antes de esto, el uso de unidadesvhsignificaba que una página se reprocesaba de manera inestable cada vez que el usuario cambiaba la dirección de desplazamiento.Se mejoró la 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 un agotamiento de la batería para volver a diseñar y pintar la página.
Se mejoró la interoperabilidad con Safari en iOS. El nuevo modelo debe coincidir con el comportamiento de Safari, lo que facilita la vida de los desarrolladores web. La opción poco intuitiva de hacer que las unidades
vhsean el viewport más grande posible, pero la ICB la más pequeña posible es coincidir con el comportamiento de Safari.
Para escenarios de pantalla completa, en los que la barra de URL está bloqueada en un estado oculto, el IBC utilizará la altura de la pantalla completa. Esto es coherente con las definiciones anteriores, ya que "el menor viewport posible" será el completo, ya que la barra de URL no se muestra durante el desplazamiento.
Demostración
- Aquí hay una demostración.
Las cuatro barras ubicadas a la derecha de la página son todas combinaciones posibles de
99%,99vh,position:fixedyposition:absoluteque 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.