iPhone Veilige gebiedsimulator en CSS-generator — Numio

Vergelijk iPhone veilige gebied-inzetstukken in staand en liggend. Bekijk een voorbeeld van de overlapping van vaste knoppen en kopieer responsieve CSS- of Tailwind-code.

Werkt in je browser · Geen account nodig

Apparaat

Oriëntatie

Gebieden tonen

Alleen een schema; de camera-uitsparing en hoeken zijn illustratief.

Referentie-afstanden pt

Boven: 0
Rechts: 84
Onder: 34
Links: 0

Logisch scherm: 466 × 678 pt
Veilige afmetingen: 382 × 644 pt
Fysieke resolutie: 1398 × 2034 px
Renderschaal: 3×

Over deze waarden

Gegevens bijgewerkt 2026-09-26

Tussenruimte voor inhoud16 px

De logische afmetingen en veilige afstanden van de iPhone Duo komen uit de iOS 27.1-simulator; in liggende stand wordt de indeling met het apparaat naar links gedraaid gebruikt. Op het binnenscherm blijft de statusbalk zichtbaar. Donkere blokken markeren door het systeem gereserveerde gebieden. De simulatorindeling van 669 × 951 pt en de officiële paneelresolutie van 1878 × 2670 px zijn afzonderlijke waarden, geen directe 3×-omrekening. Deze pagina toont volledig open- en dichtgeklapte toestanden, geen metingen aan een fysiek apparaat.

Code voor een aanpasbare indeling

De code gebruikt actuele env()-waarden en niet de vaste getallen van het gekozen apparaat. De tussenruimte beïnvloedt de uitvoer; de demoschakelaar vergelijkt alleen indelingen. De pagina reserveert ruimte voor de vaste balk en de knop van 44px. Test hogere inhoud en het gedrag van Safari en PWA’s in je project.

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

Veilig gebied van deze browser

Browserwaarden ophalen…

Actuele CSS-pixels uit deze browser, onafhankelijk van de gekozen voorinstelling. Nul kan correct zijn op een desktop of binnen een rechthoekige viewport. Waarden kunnen veranderen als je het scherm draait of het venster vergroot of verkleint. Hiermee wordt je apparaat niet herkend en Safari niet nagebootst.

Referentietabel voor het veilige gebied van iPhones

Waarden in staande stand, in logische punten (pt), bij de standaard schermzoom en met zichtbare statusbalk. Voor de veilige afmetingen worden de twee bijbehorende randafstanden van de logische schermgrootte afgetrokken. Voorinstellingen vervangen geen tests op apparaten.

Referentietabel voor het veilige gebied van iPhones — Staand
Apparaat	Logisch scherm	Boven (pt)	Onder (pt)	Rechts (pt)	Veilige afmetingen
iPhone Duo · Buitenscherm · Dichtgeklapt	466 × 678	0	34	84	382 × 644
iPhone Duo · Binnenscherm · Opengeklapt	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

Hoe werkt het

Kies een apparaat en oriëntatie om de referentie-afmetingen te bekijken.
Open de indelingsdemo, schakel de veilige afstanden in of uit en pas de tussenruimte aan om de positie van de knop te vergelijken.
Kopieer CSS- of Tailwind-code en controleer deze vervolgens in de beoogde browser en op het beoogde apparaat.

Voorbeeld

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

Details en beperkingen

CSS-pixels, native indelingspunten en fysieke pixels zijn verschillende eenheden. De iPhone 13 mini rendert op 3×, maar schaalt het resultaat terug naar de fysieke resolutie.

Veilige gebieden kunnen veranderen door OS-versies, schermzoom, browserbediening en appindeling. De getekende uitsparing is geen ontwerpsjabloon voor productie.

FAQ

Waarom geeft deze browser 0px aan?

Een rechthoekige viewport kan volledig veilig zijn. Desktopbrowsers geven vaak nul terug, zelfs als je een iPhone-voorinstelling kiest. Een andere voorinstelling verandert je browser niet.

Kan ik een vaste padding van 34px aan de onderkant kopiëren?

Gebruik env(safe-area-inset-bottom, 0px) samen met je eigen tussenruimte. Een vaste waarde past zich niet aan liggende stand, andere apparaten of andere browseromstandigheden aan.

Pagina bijgewerkt: 2026-09-27