В нативных приложениях для Android есть фича показывать интерфейс приложения от верхнего края экрана до нижнего. Не от границ приложения, которые выделяет ОС со служебными полосками, а от физического края до другого физического края. Залезая на шторки, островки и прочие приколы современных смартфонов.
Теперь такое же можно делать и в Chrome 135+. Для этого надо добавить метатег на страницу.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Ключ
viewport-fit как раз и отвечает за включение этого специального режима.А в CSS нужно тогда, как мы уже привыкли для iOS, поработать с
env(safe-area-inset-bottom), чтобы всякое кликабельное у вас на сайте не попало в служебные островки, которые всё-таки будут мешать пользователю кликнуть.В статье есть примеры кода, как работать с «новым» режимом. И видео с визуальной разницей старого и нового режимов. И инструкция, как потестировать это уже сейчас. Больше всего в инструкции мне нравится фраза «Restart Chrome twice».
Почему я режим называю «новым» в кавычках: потому что на iOS мы и так уже работали с похожим поведением, так что если у вас уже были оптимизации под островок и бровку на яблочных смартфонах, то в Android, по идее, заведётся тоже. Более того, Chrome умеет в правильные переменные
env тоже очень давно, так что вся новость скорее в том, что теперь надо будет не забыть протестировать ваш красивый сайт ещё и в режиме «от края до края».https://developer.chrome.com/docs/css-ui/edge-to-edge