El comportamiento de cambio de tamaño de la barra de URL cambiará en Chrome para 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 muestra o se oculta. En su lugar, las unidades vh se ajustarán al tamaño del viewport como si la barra de URL siempre estuviera oculta. Es decir, el tamaño de las unidades vh se ajustará 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 el bloque contenedor raíz que se usa cuando se ajusta el tamaño de los elementos en relación con sus elementos superiores. Por ejemplo, si le asignas al elemento <html> un estilo de width: 100%; height: 100%, este tendrá el mismo tamaño que el ICB. Con este cambio, el ICB no cambiará de tamaño cuando se oculte la barra de URL.
En su lugar, mantendrá la misma altura, como si la barra de URL siempre se mostrara ("viewport más pequeño posible"). Esto significa que un elemento con el tamaño de la altura del ICB no ocupará 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 se modifica. Es decir, un elemento position:
fixed cuyo bloque contenedor es el ICB cambiará de tamaño en respuesta a la ocultación o visualización de la barra de URL. Por ejemplo, si su altura es 100%, siempre ocupará exactamente la altura visible, independientemente de si se muestra o no la barra de URL. De manera similar, para las longitudes de vh, también se cambiará el tamaño para que coincida con la altura visible teniendo en cuenta la posición de la barra de URL.
Existen algunos motivos para este cambio:
Unidades
vhutilizables en dispositivos móviles. Antes de esto, usar unidadesvhimplicaba que una página se reflujonaba de forma abrupta cada vez que el usuario cambiaba la dirección de desplazamiento.Se mejoró la experiencia del usuario. Si una página se vuelve a fluir 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 consumo excesivo de batería para volver a diseñar y volver a pintar la página.
Se mejoró la interoperabilidad con Safari en iOS. El modelo nuevo 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 que el ICB sea el más pequeño posible, es para que coincida con el comportamiento de Safari.
En situaciones de pantalla completa, en las que la barra de URL está bloqueada en un estado oculto, el ICB usará la altura de 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 cuando se desplaza el contenido.
Demostración
- Aquí tienes una demostración.
Las cuatro barras de la derecha de la página son todas las combinaciones posibles de
99%,99vh,position:fixedyposition:absoluteproporcionadas en una página desplazable. Si ocultas la barra de URL, se 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