Руководство по переходу на полноэкранный режим в Chrome на Android

Bramus

Опубликовано: 28 февраля 2025 г.

Отображение от края до края – это функция Android, которая позволяет приложениям занимать всю ширину и высоту экрана, отрисовывая контент за системными строками Android.

До версии Chrome 135 браузер Chrome на устройствах Android не занимал всю площадь экрана. В этом руководстве рассказывается, как это изменение повлияет на сайты и что вы как разработчик можете сделать, чтобы адаптироваться к нему.

Бары везде

В Android есть системные строки, которые предоставляет сама операционная система.

Строка состояния, строка заголовка и панель навигации вместе называются системными строками. На них отображается важная информация, например уровень заряда батареи, время и уведомления, а также можно взаимодействовать с устройством.

В верхней части экрана находится строка состояния, в которой показываются значки уведомлений и системные значки.

Иллюстрация верхней части устройства Android с выделенной системной строкой.
Строка состояния на устройстве Android (источник).

В нижней части экрана находится панель навигации, с помощью которой можно управлять навигацией, используя кнопки "Назад", "Главный экран" и "Обзор". Это может быть классическая навигация с тремя кнопками или современная панель навигации жестами.

Иллюстрация нижней части устройства Android с панелью навигации жестами.
Панель навигации жестами (источник).

Помимо системных панелей Android, в Chrome есть адресная строка, которая динамически расширяется и сворачивается при прокрутке.

Chrome занимает весь экран

Когда вы открываете сайт, он показывается в прямоугольнике, который называется областью просмотра макета.

В Chrome на Android до версии 135 область макета отрисовывается между верхней строкой состояния и нижней панелью навигации жестами. Наличие адресной строки Chrome может влиять на размер области просмотра, но она никогда не будет расширяться до верхней системной строки или нижней панели навигации жестами.

Иллюстрации устройства Android с Chrome на Android, который не занимает весь экран. На иллюстрации слева показан браузер Chrome с развернутой адресной строкой. Между адресной строкой и панелью навигации жестами находится выделенный зеленым цветом прямоугольник размером 100svh. На иллюстрации справа показан браузер Chrome со свернутой адресной строкой. Между строкой состояния и панелью навигации жестами находится зеленый прямоугольник размером 100lvh. Область просмотра имеет синюю пунктирную границу.
Минимальный и максимальный размер области просмотра в Chrome на устройствах Android до версии 135. Эти размеры называются маленькой и большой областью просмотра. Область просмотра имеет синюю пунктирную границу.

В Chrome 135 и более поздних версиях область просмотра может выходить за пределы панели навигации жестами Android. Это называется отображением от края до края.

Иллюстрации области просмотра в Chrome на Android без заполнения всего экрана (слева) и с заполнением всего экрана (справа). На каждой визуализации есть синий прямоугольник, представляющий элемент высотой 100vh. Текст слева объясняет, что происходит, когда Chrome не занимает весь экран. В нем говорится: "Область просмотра остается зажатой между верхней строкой состояния и нижней панелью навигации жестами". Текст справа объясняет, что происходит, когда Chrome занимает весь экран. На нем написано "Область просмотра выходит за пределы панели навигации жестами".
Большая область просмотра в Chrome на устройстве Android без заполнения экрана (слева) и с заполнением экрана (справа). В Chrome с поддержкой полноэкранного режима область просмотра распространяется на панель навигации жестами, когда динамические панели инструментов Chrome скрыты.

Поведение Chrome без отображения от края до края

На записи ниже показано, как адресная строка Chrome (вверху) динамически скрывается при прокрутке страницы в Chrome на устройстве Android без поддержки полноэкранного режима. Однако верхняя строка состояния и нижняя панель навигации Android остаются на своих местах.

Старое поведение: Chrome на устройстве Android без поддержки полноэкранного режима и загруженный сайт https://developer.chrome.com/.

В этом случае размер области просмотра макета меняется, когда адресная строка Chrome сворачивается или разворачивается.

Как Chrome работает с отображением от края до края

В Chrome 135 и более поздних версиях веб-контент может отображаться до нижнего края устройства, поскольку область просмотра расширяется до панели навигации жестами.

Динамический безрамочный экран с "подбородком"

По умолчанию в Chrome в полноэкранном режиме показывается новая динамическая нижняя панель, которая называется "подбородок" и располагается над панелью навигации жестами. Как и адресная строка Chrome, эта панель исчезает, когда вы начинаете прокручивать страницу, и влияет на размер области просмотра.

На записи ниже показано, как в Chrome на устройстве Android с поддержкой полноэкранного режима адресная строка и нижняя панель автоматически скрываются при прокрутке страницы вниз. В результате область просмотра расширяется, и веб-контент может быть отрисован до нижнего края устройства.

Новое поведение: Chrome на устройстве Android с поддержкой полноэкранного режима и загруженной страницей https://developer.chrome.com/. Обратите внимание, как нижняя часть экрана исчезает при прокрутке страницы.

Такое поведение подбородка является новым поведением Chrome по умолчанию, начиная с версии 135.

По умолчанию показывать контент от края до края с возможностью отключения

Сайты, созданные для работы в режиме "от края до края", могут указать это, изменив метатег viewport. Если этот параметр включен, область просмотра по умолчанию будет расширяться до нижнего края, и подбородок никогда не будет виден.

Новое поведение при включенном отображении от края до края. Область просмотра при загрузке страницы расширяется до нижнего края. Подбородок отсутствует.

Чтобы указать, что страница поддерживает режим "от края до края", используйте метатег viewport с ключом viewport-fit.

Чтобы включить режим "от края до края", задайте для параметра viewport-fit значение cover.

<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /

Подробнее о различных значениях атрибута viewport-fit…

Как работать с контентом, который может быть перекрыт панелью навигации жестами

В режиме "От края до края" учитывайте, что панель навигации жестами может закрывать часть контента.

В большинстве случаев вам не нужно ничего делать, потому что нижняя часть подбородка убирается сама. Пользователи по-прежнему могут просматривать весь контент на вашем сайте.

Однако если вы включите показ от края до края по умолчанию или у вас есть элемент, расположенный в нижней части области просмотра, вам может потребоваться учесть, что этот контент может быть перекрыт.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

Если подбородок есть, пользователи сначала смогут видеть контент, но когда он исчезнет, контент будет закрыт панелью навигации Android.

Иллюстрации устройства Android с Chrome для Android, в котором включено отображение от края до края. На иллюстрации слева показан браузер Chrome с подбородком. Контент с фиксированным положением внизу (показан красным) размещается непосредственно над ней. На иллюстрации справа показан браузер Chrome, в котором не видна нижняя часть. В этом случае закрепленный внизу контент будет прижат к нижнему краю устройства. Текст рядом с ней поясняет, что контент, расположенный внизу экрана, теперь закрывается панелью навигации жестами.
Иллюстрация сайта с элементом, расположенным внизу и имеющим значение `bottom: 0`. Когда виден подбородок, элемент, расположенный внизу, находится над панелью навигации Android. Когда подбородок уходит, элемент оказывается позади панели навигации Android, которая частично его закрывает.

Чтобы устранить проблему, используйте отступы безопасной зоны, чтобы всегда размещать затронутые элементы над нижней панелью навигации жестами Android или чтобы их фон распространялся на эту область.

Вставки безопасной области

Вставки безопасной области – это четыре переменные среды, которые определяют прямоугольник по его верхнему, правому, нижнему и левому вставкам от края области просмотра.

Эти четыре значения образуют прямоугольник безопасной области, в которой можно размещать контент, не опасаясь, что он будет закрыт элементами интерфейса, например панелью навигации Android.

Иллюстрация устройства Android с Chrome в полноэкранном режиме. Подбородок имеет выдвижной вид. В Chrome показан прямоугольник безопасной зоны, окрашенный в желтый цвет. Его нижний край находится чуть выше панели навигации жестами. На панели навигации жестами внизу экрана синим цветом выделена нижняя часть области просмотра. Текст рядом с ним гласит, что прямоугольник безопасной области вставлен в область просмотра с помощью safe-area-bottom-inset, что предотвращает отрисовку контента под панелью навигации жестами.
Иллюстрация Chrome в полноэкранном режиме с желтым прямоугольником области просмотра и безопасной зоны. Поскольку подбородок втянут, нижний отступ безопасной области не позволяет прямоугольнику безопасной области достигать панели навигации жестами. В результате вы видите часть области просмотра под панелью навигации жестами.

Использование нижнего отступа безопасной области

Для элементов, расположенных в нижней части окна просмотра, используйте значение safe-area-inset-bottom для свойства bottom, чтобы они не оказались под панелью навигации жестами. Значение, возвращаемое safe-area-inset-bottom, динамически обновляется, когда подбородок убирается, поэтому элементы, расположенные внизу, остаются над панелью навигации жестами Android.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}
Иллюстрация устройства Android с Chrome в полноэкранном режиме. На визуализации слева видна нижняя рамка, а контент с привязкой к низу экрана расположен прямо над ней. На визуализации справа нижняя часть экрана не видна, а контент, привязанный к нижней части экрана, расположен в том же месте, что и на визуализации слева. Из-за этого обычный контент виден из-под панели навигации жестами.
Иллюстрации сайта с элементом, расположенным внизу и использующим нижнюю безопасную область с помощью свойства bottom. Если нижняя панель видна, панель поиска находится над панелью навигации жестами Android. Когда подбородок исчезает, элемент также оказывается над ним.

Как видно на иллюстрациях, результат пока не идеален: когда подбородок убирается, оставшийся контент страницы становится виден в области панели навигации жестами. Это связано с тем, что в этом состоянии область просмотра распространяется на область панели навигации жестов.

Чтобы контент не отрисовывался под контентом, закрепленным внизу, обычно задают для параметра padding-bottom значение safe-area-inset-bottom. В этом случае элемент, прикрепленный к нижней части экрана, будет автоматически увеличиваться по мере того, как подбородок будет скрываться. Хотя это и работает, такой подход не рекомендуется, поскольку приводит к пробуксовке макета, пока подбородок убирается с экрана.

Не задавайте для параметра padding значение safe-area-inset.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}

Использование нижнего отступа безопасной зоны и максимального нижнего отступа безопасной зоны

Вместо этого рекомендуется использовать сочетание safe-area-inset-bottom и safe-area-max-inset-bottom. В отличие от динамического параметра safe-area-inset-bottom, который обновляется, когда подбородок убирается с экрана, параметр safe-area-max-inset-bottom представляет максимальное значение параметра safe-area-inset-bottom.

Используйте safe-area-max-inset-bottom, чтобы увеличить элемент, закрепленный внизу, и объедините его с safe-area-inset-bottom, чтобы опустить элемент и разместить его за подбородком.

Используйте safe-area-max-inset-bottom в сочетании с 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));
}

Попробовать демоверсию

Визуально результат будет таким же, как при использовании подхода padding-bottom: env(safe-area-inset-bottom, 0px);, но производительность будет намного выше. Поскольку при движении подбородка меняется только вычисляемое значение для bottom, не происходит перерисовки макета.

Иллюстрация устройства Android с Chrome в полноэкранном режиме. На визуализации слева видна черная полоса, а контент с привязкой к нижнему краю расположен прямо над ней. На визуализации справа подбородок не виден, а контент, привязанный к нижней части экрана, визуально увеличился и занял место, где раньше был подбородок. Это создает приятный визуальный эффект и предотвращает появление обычного контента страницы под панелью навигации жестами.
Иллюстрации сайта с элементом, закрепленным внизу и учитывающим безопасную область. Если подбородок виден (слева), элемент располагается над ним. Если подбородок не виден, элемент визуально переходит в панель навигации жестами Android.

Попробуйте режим "от края до края" до выхода Chrome 135

Чтобы попробовать режим "от края до края" до его публичного стабильного выпуска, вам нужно включить несколько экспериментальных параметров Chrome через chrome://flags:

  • EdgeToEdgeBottomChin (при необходимости задайте значение "Включить отладку", чтобы половина подбородка была окрашена в розовый цвет и его было проще отличить от других элементов интерфейса)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (не устанавливайте значение "Включено", а выберите "Включено смещение по оси Y")
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint (не устанавливайте значение "Включено", а выберите "Включена прокручиваемая версия")

Убедитесь, что следующие флаги не включены:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

Дважды перезапустите Chrome.

Нам важно ваше мнение

Если у вас есть отзывы о Chrome и его реализации на весь экран, сообщите нам об этом, создав ошибку Chromium в компоненте "UI > Browser > Mobile > EdgeToEdge". Благодарим за отзыв.