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

Bramus

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

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

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

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

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

Бары повсюду

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

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

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

Строка состояния на Android выделена ( источник ) .

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

Панель навигации жестами ( источник ).

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

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

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

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

Минимальный и максимальный размер области просмотра в Chrome на Android до Chrome 135. Эти размеры известны как маленькая и большая область просмотра. Сам видовой экран имеет пунктирный синий контур.

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

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

Примечание. В Chrome для iOS добавлена ​​полная поддержка с выпуском iOS 11.3. Рекомендации в этом руководстве также применимы к Chrome, работающему на iOS.

Поведение 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.

Иллюстрация веб-сайта с нижним элементом с надписью «bottom: 0». Когда подбородок виден, нижний элемент находится над панелью навигации Android. Когда подбородок отодвигается, элемент оказывается за панелью навигации Android, которая частично скрывает его в этой точке.

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

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

Browser Support

• 69
• 79
• 65
• 11

Source

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

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

Иллюстрация 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);
}

Иллюстрации веб-сайта с элементом, расположенным внизу, который использует вставку нижней безопасной области со свойством 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); /* 🛑 Don't do this, as it causes layout thrashing. */
}

Важно! Чтобы предотвратить снижение производительности, Chrome не будет отодвигать подбородок при прокрутке, когда обнаружит этот шаблон.

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

Вместо этого рекомендуемый подход — использовать комбинацию 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));
}

Попробуйте живую демо-версию

Примечание. Резервное значение 36px для safe-area-max-inset-bottom выбрано для браузеров, которые не поддерживают safe-area-max-inset-bottom . Это значение было выбрано из-за того, что Safari на iOS в режиме одной вкладки имеет максимальное смещение по нижнему краю 36px в портретном режиме.

Важно: в Chrome есть оптимизация кода – так называемый быстрый путь – когда он обнаруживает calc(env(safe-area-inset-bottom, …) +/- …); шаблон. Этот быстрый путь позволяет содержимому, привязанному к нижней части, эффективно перемещаться вместе с подбородком, в то время как подбородок убирается в сторону.

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

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

Примечание. Максимальные вставки безопасной области ( safe-area-max-inset-bottom и подобные) доступны в Chrome 135.

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

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

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

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

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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