Безопасные мобильные раскладки: укрощаем чёлки и вырезы 📱
Работа с viewport-fit, safe-area-inset и safe-area-max-inset для интерфейсов, не перекрываемых вырезами и системным UI.
Современные смартфоны — это зоопарк вырезов, камер и системных плавающих кнопок, которые так и норовят перекрыть интерфейс. Чтобы элементы не «заплывали» под чёлку, важно правильно работать с безопасными зонами.
В блоге Polypane вышел отличный разбор по работе с safe-area-inset.
Главное из статьи:
- viewport-fit=cover — база. Без этого параметра в
<meta viewport>браузер просто добавит пустые поля по бокам, игнорируя всю площадь экрана. - env(safe-area-inset-*) — те самые переменные для управления отступами сверху, снизу и по бокам.
- CSS — напоминание о том, как изящно комбинировать системные отступы с вашим дизайном через
calc(1rem + env(safe-area-inset-bottom)). - Новинка: safe-area-max-inset-* — переменные, которые решают проблему «прыгающего» интерфейса. В отличие от стандартных инсетов, они не меняются динамически, когда адресная строка скрывается при скролле.
Если вы всё ещё делаете фиксированные отступы «на глаз» — это отличный повод перейти на системные переменные и забыть о проблемах с разными моделями iPhone и Android.