Symulator bezpiecznego obszaru iPhone i generator CSS — Numio

Porównaj wstawki bezpiecznego obszaru iPhone'a w orientacji pionowej i poziomej. Wyświetl podgląd stałego nakładania się przycisków i skopiuj responsywny kod CSS lub Tailwind.

Działa w Twojej przeglądarce · Nie wymaga konta

Urządzenie

Orientacja

Pokaż obszary

Tylko schemat; wycięcia i rogi aparatu mają charakter poglądowy.

Referencyjne marginesy bezpieczeństwa pt

Góra: 0
Prawa: 84
Dół: 34
Lewa: 0

Ekran logiczny: 466 × 678 pt
Bezpieczne wymiary: 382 × 644 pt
Natywna rozdzielczość: 1398 × 2034 px
Skala renderowania: 3×

O tych wartościach

Dane zaktualizowane 2026-09-26

Odstępy w treści16 px

iPhone Rozmiary logiczne i wstawki Duo wykorzystują odniesienia do symulatora iOS 27.1; krajobraz wykorzystuje układ poziomy z lewej strony. Wewnętrzny wyświetlacz sprawia, że pasek stanu jest widoczny. Ciemne bloki oznaczają regiony zarezerwowane dla systemu. Układ symulatora o rozdzielczości 669 × 951 pkt i oficjalna rozdzielczość panelu 1878 × 2670 pikseli to osobne wartości, a nie bezpośrednia konwersja 3×. Ta strona pokazuje stany w pełni otwarte i zamknięte, a nie pomiary urządzeń fizycznych.

Kod układu adaptacyjnego

W kodzie używane są wartości live env(), a nie stałe numery wybranego urządzenia. Odstępy zmieniają wynik; przełącznik demo porównuje tylko układy. Strona rezerwuje miejsce na stały pasek i jego przycisk 44px. Przetestuj wyższą zawartość, zachowanie Safari i PWA w swoim projekcie.

<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>

Bezpieczny obszar tej przeglądarki

Odczytywanie wartości przeglądarki…

Na żywo CSS px z tej przeglądarki, niezależnie od wybranego ustawienia wstępnego. Zero może być prawidłowe na pulpicie lub w prostokątnej rzutni. Wartości mogą ulec zmianie w przypadku obracania lub zmiany rozmiaru; nie identyfikuje to Twojego urządzenia ani nie emuluje Safari.

Tabela referencyjna obszaru bezpiecznego iPhone

Wartości portretu w punktach logicznych (pt), przy standardowym powiększeniu wyświetlacza i widocznym pasku stanu. Bezpieczne wymiary odejmując dwie odpowiednie wstawki od logicznego rozmiaru ekranu. Ustawienia wstępne nie zastępują testowania urządzenia.

Tabela referencyjna obszaru bezpiecznego iPhone — Pionowa
Urządzenie	Ekran logiczny	Góra (pt)	Dół (pt)	Prawa (pt)	Bezpieczne wymiary
iPhone Duo · Zewnętrzny · Zamknięty	466 × 678	0	34	84	382 × 644
iPhone Duo · Wewnętrzny · Otwarty	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

Jak używać

Wybierz urządzenie i orientację, aby sprawdzić jego wymiary referencyjne.
Otwórz wersję demonstracyjną układu, przełącz wstawki bezpiecznego obszaru i dostosuj odstępy, aby porównać położenie przycisku.
Skopiuj kod CSS lub Tailwind, a następnie sprawdź go w docelowej przeglądarce i urządzeniu.

Przykład

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

Szczegóły i ograniczenia

CSS px, natywne punkty układu i piksele fizyczne to różne jednostki. iPhone 13 mini renderuje w 3×, ale próbkuje w dół do swojej natywnej rozdzielczości.

Bezpieczne obszary mogą się zmieniać w zależności od wersji OS, powiększenia wyświetlacza, elementów sterujących przeglądarki i układu aplikacji. Przedstawiona wycinka nie jest szablonem projektu produkcyjnego.

FAQ

Dlaczego ta przeglądarka wyświetla 0px?

Rzutnia prostokątna nie może mieć żadnego niebezpiecznego obszaru. Przeglądarki komputerowe często zwracają zero nawet po wybraniu ustawienia wstępnego iPhone; zmiana ustawienia wstępnego nie powoduje zmiany przeglądarki.

Czy mogę skopiować stałe dolne wypełnienie o rozmiarze 34 pikseli?

Użyj env(safe-area-inset-bottom, 0px) z własnymi odstępami. Stała wartość nie dostosowuje się do krajobrazu, innych urządzeń ani różnych warunków przeglądarki.

Aktualizacja strony: 2026-09-27