Руководство по сквозной миграции Chrome на Android,Руководство по сквозной миграции Chrome на Android,Руководство по сквозной миграции Chrome на Android,Руководство по сквозной миграции Chrome на Android

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

Edge-to-edge — это функция Android , которая позволяет приложениям охватывать всю ширину и высоту дисплея, рисуя за системными панелями Android .

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

Бары повсюду

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

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

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

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

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

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

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

Chrome становится безграничным

Когда вы посещаете веб-сайт, этот веб-сайт отображается в прямоугольнике, известном как область просмотра (макета) .

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

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

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

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

Поведение Chrome без безграничной возможности

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

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

Здесь размер области просмотра макета меняется по мере того, как адресная строка Chrome убирается или расширяется.

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

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

Динамический переход от края до края с «подбородком»

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

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

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

Такое поведение подбородка является новым поведением 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 с Chrome на Android с безрамочным интерфейсом. На рисунке слева показан Chrome с видимым подбородком. Содержимое, привязанное снизу (показано красным), находится поверх него. На рисунке справа показан Chrome без видимого подбородка. Там прикрепленный снизу контент располагается напротив нижнего края устройства. Текст вместе с ним поясняет, что содержимое, расположенное внизу, теперь перекрыто панелью навигации с помощью жестов.
Иллюстрация веб-сайта с нижним элементом с надписью «bottom: 0». Когда подбородок виден, нижний элемент находится над панелью навигации Android. Когда подбородок отодвигается, элемент оказывается за панелью навигации Android, которая частично скрывает его в этой точке.

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

Вставки в безопасную зону

Browser Support

  • Хром: 69.
  • Край: 79.
  • Фаерфокс: 65.
  • Сафари: 11.

Source

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

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

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

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

Для элементов, которые расположены в нижней части области просмотра, используйте в качестве 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);
}
Изображение устройства Android с Chrome в безрамочном режиме. На визуализации слева виден подбородок, а содержимое, привязанное к нижней части, находится прямо над ним. На визуализации справа подбородок не виден, а содержимое, привязанное к нижней части, расположено в том же месте, что и содержимое слева. Это приводит к тому, что обычный контент становится видимым из-под панели навигации с помощью жестов.
Иллюстрации веб-сайта с элементом, расположенным внизу, который использует вставку нижней безопасной области со свойством 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 , никаких изменений макета не происходит.

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

Попробуйте полную версию до Chrome 135.

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

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

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

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

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

Нам нужны ваши отзывы

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