Опубликовано: 28 февраля 2025 г.
Edge-to-edge — это функция Android , которая позволяет приложениям охватывать всю ширину и высоту дисплея, рисуя за системными панелями Android .
До Chrome 135 Chrome на Android не отображал изображение от края до края. В этом руководстве объясняется, какое влияние это изменение оказывает на веб-сайты, и что вы, как разработчик, можете сделать, чтобы принять это изменение.
Бары повсюду
Android поставляется с системными панелями, предоставляемыми самой операционной системой.
Строка состояния, строка заголовка и панель навигации вместе называются системными панелями. Они отображают важную информацию, такую как уровень заряда батареи, время и оповещения, а также обеспечивают прямое взаимодействие с устройством из любой точки мира.
В верхней части экрана находится строка состояния , содержащая значки уведомлений и системные значки.

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

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

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

Поведение Chrome без безграничной возможности
В следующей записи показан Chrome на Android без поддержки «от края до края», адресная строка Chrome (вверху) динамически убирается при прокрутке страницы. Однако верхняя строка состояния Android и панель навигации Android внизу остаются фиксированными.
Здесь размер области просмотра макета меняется по мере того, как адресная строка Chrome убирается или расширяется.
Поведение Chrome при работе от края до края
Начиная с Chrome 135, Chrome может отображать веб-контент до нижнего края устройства, расширяя область просмотра до области панели навигации с помощью жестов.
Динамический переход от края до края с «подбородком»
По умолчанию Chrome от края до края отображает новую динамическую нижнюю панель, известную как «подбородок», над областью панели навигации жестов. Как и адресная строка Chrome, этот подбородок убирается при прокрутке и влияет на размер области просмотра.
В следующей записи Chrome на Android с поддержкой «от края до края» адресная строка Chrome и подбородок динамически убираются при прокрутке страницы вниз. Это приводит к расширению области просмотра, позволяя отображать веб-контент до нижнего края устройства.
Такое поведение подбородка является новым поведением Chrome по умолчанию, начиная с 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, либо чтобы их фон распространялся на эту область.
Вставки в безопасную зону
Вставки безопасной области — это четыре переменные среды, которые определяют прямоугольник по его верхней, правой, нижней и левой вставкам от края области просмотра.
В совокупности эти четыре значения образуют прямоугольник безопасной области , в котором можно безопасно размещать контент, чтобы ему не мешали такие вещи, как панель навигации с помощью жестов Android.

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

bottom
. Когда подбородок виден, панель находится над панелью навигации жестов Android. Когда подбородок уходит, элемент также садится над ним.Как вы можете видеть на иллюстрациях, результат еще не идеален: когда подбородок убирается в сторону, оставшееся содержимое страницы становится видимым в области панели навигации жестов. Это связано с тем, что в этом состоянии область просмотра расширяется до области панели навигации жестов.
Чтобы предотвратить отрисовку контента под содержимым, привязанным к нижней части, обычно используется подход, заключающийся в том, чтобы установить для padding-bottom
значение safe-area-inset-bottom
. Таким образом, элемент, закрепленный снизу, автоматически увеличивается по мере того, как подбородок скрывается. Хотя это действительно работает, этот подход не рекомендуется, так как он приводит к сбою макета , когда подбородок уходит в сторону.
Не устанавливайте для padding
значение вставки безопасной области.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
Использование нижней вставки безопасной зоны и максимальной вставки нижней части безопасной зоны.
Вместо этого рекомендуемый подход — использовать комбинацию 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
(при необходимости установите для него значение «Включена отладка» половина подбородка окрасится в розовый цвет, чтобы более четко отличить его от другого пользовательского интерфейса) -
DrawCutOutEdgeToEdge
-
BottomBrowserControlsRefactor
(не устанавливайте значение «Включено», а установите значение «Включена отправка yOffset») -
DynamicSafeAreaInsets
-
DynamicSafeAreaInsetsOnScroll
-
EdgeToEdgeWebOptIn
-
DrawKeyNativeEdgeToEdge
-
EdgeToEdgeSafeAreaConstraint
(не устанавливайте значение «Включено», а установите значение «Включенный вариант с прокруткой»)
Убедитесь, что следующие флаги не включены:
-
DrawNativeEdgeToEdge
-
EdgeToEdgeEverywhere
Перезапустите Chrome дважды .
Нам нужны ваши отзывы
Если у вас есть отзывы о Chrome и его комплексной реализации, свяжитесь с нами , сообщив об ошибке Chromium в компоненте «UI > Браузер > Mobile > EdgeToEdge» . Мы ценим ваш отзыв.