Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

Руководство по переходу на полноэкранный режим в 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 без поддержки режима "от края до края". Адресная строка Chrome (вверху) динамически убирается при прокрутке страницы. Однако верхняя строка состояния и нижняя панель навигации, которые являются стандартными для Android, остаются на месте.

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

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

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

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

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

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

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

Новое поведение: 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, viewport-fit=cover" />

Подробнее о различных значениях viewport-fit читайте на сайте MDN.

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

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

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

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

.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, сбоев макета не происходит.

Попробуйте режим без полей до выхода Chrome 135

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

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

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

DrawNativeEdgeToEdge
EdgeToEdgeEverywhere

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

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

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