Симулятор безопасной области iPhone и генератор CSS

Размеры безопасных областей iPhone в двух ориентациях. Сравнивайте перекрытие кнопок и копируйте CSS или Tailwind.

В браузере · Без регистрации

Устройство

Ориентация

Показать области

Схема: камера и углы не являются точными контурами устройства.

Справочные отступы pt

Сверху: 0
Справа: 84
Снизу: 34
Слева: 0

Логический экран: 466 × 678 pt
Безопасные размеры: 382 × 644 pt
Физическое разрешение: 1398 × 2034 px
Масштаб рендеринга: 3×

О значениях

Данные обновлены 2026-09-26

Интервал контента16 px

Логические размеры и отступы iPhone Duo взяты из симулятора iOS 27.1; альбомный режим соответствует повороту влево. Внутренний экран сохраняет строку состояния. Тёмные блоки обозначают системные области. Логический размер 669 × 951 pt и официальное физическое разрешение 1878 × 2670 px — разные величины, без прямого пересчёта в 3×. Показаны полностью открытое и закрытое состояния, а не замеры реального устройства.

Адаптивный код

Код использует текущие env(), а не фиксированные значения модели. Интервал меняет код; переключатель сравнивает только демонстрацию. Учтено место для панели и кнопки высотой 44px. Проверьте более высокий контент, Safari и PWA в проекте.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<style>
  .safe-page {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
  }
  .safe-bottom-bar {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    padding: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    background: #fff;
    color: #171717;
  }
  .safe-bottom-bar button { min-height: 44px; width: 100%; }
</style>

<main class="safe-page"><!-- Page content --></main>
<footer class="safe-bottom-bar"><button>Continue</button></footer>

Безопасная область этого браузера

Чтение значений браузера…

Текущие значения CSS px этого браузера, независимые от профиля. На компьютере или в прямоугольной области 0 может быть корректным. При повороте или изменении размера значения меняются. Определение модели и эмуляция Safari не выполняются.

Таблица безопасных областей iPhone

Портретные значения в логических точках (pt), при стандартном масштабе и видимой строке состояния. Безопасные размеры равны логическому размеру экрана за вычетом двух соответствующих отступов. Проверяйте и на реальном устройстве.

Таблица безопасных областей iPhone — Портретная
Устройство	Логический экран	Сверху (pt)	Снизу (pt)	Справа (pt)	Безопасные размеры
iPhone Duo · Внешний экран · Закрыт	466 × 678	0	34	84	382 × 644
iPhone Duo · Внутренний экран · Открыт	669 × 951	82	34	0	669 × 835
iPhone 16 Pro	402 × 874	62	34	0	402 × 778
iPhone 16 Pro Max	440 × 956	62	34	0	440 × 860
iPhone 14 Pro	393 × 852	59	34	0	393 × 759
iPhone 13 mini	375 × 812	50	34	0	375 × 728
iPhone 12	390 × 844	47	34	0	390 × 763
iPhone 11	414 × 896	48	34	0	414 × 814
iPhone X	375 × 812	44	34	0	375 × 734
iPhone SE (3rd gen)	375 × 667	20	0	0	375 × 647

Как пользоваться

Выберите устройство и ориентацию для просмотра размеров.
В демонстрации переключайте отступы и меняйте интервал.
Скопируйте CSS или Tailwind и проверьте на целевом устройстве.

Пример

padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

Подробности и ограничения

CSS px, нативные точки и физические пиксели различаются. iPhone 13 mini выполняет рендеринг 3×, затем уменьшает до физического разрешения.

Версия ОС, масштаб и панели браузера влияют на отступы. Схема камеры не является точным шаблоном дизайна.

FAQ

Почему браузер показывает 0px?

Прямоугольной области могут не требоваться отступы. Выбор профиля iPhone не меняет реальную среду браузера.

Можно задать снизу 34px?

Используйте env(safe-area-inset-bottom, 0px) со своим интервалом для других устройств и ориентаций.

Страница инструмента обновлена: 2026-09-26