SSF-U - Единый стандарт для фуллскрина

Определения

Стандарт SSF-U определяет требования к семантике, доступности и логике работы фуллскрина.

Структура и Семантика

Подготовка окружения

Для корректной работы в HTML-файле обязателен мета-тег viewport со значением width=device-width, initial-scale=1.0, viewport-fit=cover.

Контент задействует всю физическую площадь экрана, включая зоны под «челкой» и системным индикатором Home, контейнеры и панели должны корректно масштабироваться под весь экран, без обрезания важного контента.

Динамическая высота

Основная единица измерения dvb, помогает пересчитывать доступное пространство при появлении/скрытии панелей браузера:

.fullscreen {
  min-block-size: 100dvb; /* динамическая высота */
}

Доступность

На современных смартфонах нижняя часть экрана зарезервирована под системную полоску жестов env(safe-area-inset-bottom), исключает случайные сворачивания приложения при нажатии на нижние кнопки:

.bottom-action-panel {
  padding-block-end: calc(var(--safe-offset) + env(safe-area-inset-bottom));
}

Иконка «Вниз»

Информирует пользователя о наличии контента ниже линии сгиба, переменная используется чтобы иконка всегда была над панелью:

.scroll-indicator {
  inset-block-end: calc(5px + env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

Интерактивность и Визуальный отклик

Контроль скролла и клавиатуры

Для предотвращения резиного скролла можно использовать следующий код:

.main-screen {
  overscroll-behavior-block: none;
}

Пример полной реализации

:root {
  --safe-offset: 16px; /* базовый отступ для кнопок и иконок */
}

.fullscreen {
  min-block-size: 100dvb;
  display: flex;
  flex-direction: column;
  overscroll-behavior-block: none;
}

.bottom-action-panel {
  position: fixed;
  inset-block-end: 0;
  inline-size: 100%;
  padding-block-end: calc(var(--safe-offset) + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.scroll-indicator {
  position: absolute;
  inset-block-end: calc(5px + env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}