Поведение изменения размера строки URL-адреса меняется в Chrome на Android, начиная с версии 56. Вот что вам следует знать:
Длины, определенные в единицах области просмотра (т. е. vh ), не будут изменять размер в ответ на отображение или скрытие строки URL. Вместо этого размеры единиц vh будут соответствовать высоте области просмотра, как если бы строка URL-адреса всегда была скрыта. То есть размеры vh будут соответствовать «максимально возможному размеру области просмотра». Это означает, что 100vh будет больше видимой высоты при отображении строки URL.
Начальный содержащий блок (ICB) — это корневой содержащий блок, используемый при определении размеров элементов относительно их родительских элементов. Например, присвоив элементу <html> стиль width: 100%; height: 100% сделает его таким же размером, как ICB. Благодаря этому изменению размер ICB не будет меняться, если строка URL-адреса скрыта. Вместо этого он останется той же высоты, как если бы строка URL-адреса отображалась всегда («наименьшая возможная область просмотра»). Это означает, что элемент, размер которого соответствует высоте ICB, не будет полностью заполнять видимую высоту, пока строка URL-адреса скрыта.
Из приведенных выше изменений есть одно исключение: это элементы, имеющие position: fixed . Их поведение остается неизменным. То есть position: fixed элемент, содержащим блоком которого является ICB, будет изменять размер в ответ на отображение или скрытие строки URL. Например, если его высота равна 100% он всегда будет заполнять ровно видимую высоту, независимо от того, отображается ли строка URL-адреса. Аналогично и для длины vh , они также изменят свой размер, чтобы соответствовать видимой высоте, принимая во внимание положение строки URL.
Есть несколько причин такого изменения:
Используемые единицы
vhна мобильном телефоне. До этого использование единиц измеренияvhозначало, что страница резко перерисовывалась каждый раз, когда пользователь менял направление прокрутки.Улучшенный пользовательский опыт. Если страница перекомпоновывается во время чтения пользователем, они могут потерять свое относительное расположение в документе. Это расстраивает, но также требует дополнительной загрузки процессора и разряда батареи для ретрансляции и перерисовки страницы.
Улучшена совместимость с Safari на iOS. Новая модель должна соответствовать поведению Safari, облегчая жизнь веб-разработчикам. Неинтуитивный выбор — сделать единицы измерения
vhмаксимально большим окном просмотра, а ICB — наименьшим из возможных, чтобы соответствовать поведению Safari.
В полноэкранных сценариях, где строка URL-адреса заблокирована в скрытом состоянии, ICB будет использовать полную высоту экрана. Это соответствует приведенным выше определениям, поскольку «наименьшая возможная область просмотра» будет полной областью просмотра, поскольку строка URL-адреса не отображается при прокрутке.
Демо
- Вот демонстрация . Четыре полоски в правой части страницы представляют собой все возможные комбинации
99%,99vh,position:fixedиposition:absoluteпредставленные на прокручиваемой странице. Скрытие строки URL показывает, как это влияет на каждый из них. События изменения размера печатаются внизу страницы.
Поддерживать
- Хром 56 на Андроиде.