iPhone Safe-Area-Simulator und CSS-Generator
Sichere iPhone-Ränder im Hoch- und Querformat prüfen, überlappende Schaltflächen vergleichen und CSS oder Tailwind kopieren.
Läuft im Browser · Ohne Anmeldung
Schematische Darstellung: Kamera und Ecken sind keine exakten Konturen.
Referenzabstände pt
- Oben
- 0
- Rechts
- 84
- Unten
- 34
- Links
- 0
- Logische Bildschirmgröße
- 466 × 678 pt
- Sichere Abmessungen
- 382 × 644 pt
- Native Auflösung
- 1398 × 2034 px
- Render-Skalierung
- 3×
Daten aktualisiert
Logische Größen und Ränder des iPhone Duo sind Referenzen aus dem iOS-27.1-Simulator; Querformat bedeutet Linksdrehung. Innen bleibt die Statusleiste sichtbar. Dunkle Blöcke markieren Systembereiche. Das logische Layout von 669 × 951 pt und die offizielle Auflösung von 1878 × 2670 px sind separate Werte, keine direkte 3×-Umrechnung. Gezeigt werden vollständig offene und geschlossene Zustände, keine Messungen am echten Gerät.
Adaptiver Layout-Code
Verwendet aktuelle env()-Werte statt fester Gerätewerte. Der Abstand ändert den Code; der Schalter vergleicht nur die Demo. Platz für die feste Leiste und eine 44px-Schaltfläche ist reserviert. Höhere Inhalte sowie Safari und PWA im Projekt testen.
Sicherer Bereich dieses Browsers
Browserwerte werden gelesen…
Aktuelle CSS-px-Werte dieses Browsers, unabhängig vom Profil. Auf dem Desktop oder in rechteckigen Viewports kann 0 korrekt sein. Drehen und Größenänderungen können die Werte ändern. Keine Geräteerkennung oder Safari-Emulation.
iPhone-Referenztabelle
Hochformatwerte in logischen Punkten (pt), bei Standardzoom und sichtbarer Statusleiste. Sichere Maße ergeben sich aus der logischen Bildschirmgröße abzüglich der beiden jeweiligen Ränder. Auch auf echten Geräten testen.
| Gerät | Logische Bildschirmgröße | Oben (pt) | Unten (pt) | Links (pt) | Rechts (pt) | Sichere Abmessungen |
|---|---|---|---|---|---|---|
| iPhone Duo · Außendisplay · Geschlossen | 466 × 678 | 0 | 34 | 0 | 84 | 382 × 644 |
| iPhone Duo · Innendisplay · Offen | 669 × 951 | 82 | 34 | 0 | 0 | 669 × 835 |
| iPhone 16 Pro | 402 × 874 | 62 | 34 | 0 | 0 | 402 × 778 |
| iPhone 16 Pro Max | 440 × 956 | 62 | 34 | 0 | 0 | 440 × 860 |
| iPhone 14 Pro | 393 × 852 | 59 | 34 | 0 | 0 | 393 × 759 |
| iPhone 13 mini | 375 × 812 | 50 | 34 | 0 | 0 | 375 × 728 |
| iPhone 12 | 390 × 844 | 47 | 34 | 0 | 0 | 390 × 763 |
| iPhone 11 | 414 × 896 | 48 | 34 | 0 | 0 | 414 × 814 |
| iPhone X | 375 × 812 | 44 | 34 | 0 | 0 | 375 × 734 |
| iPhone SE (3rd gen) | 375 × 667 | 20 | 0 | 0 | 0 | 375 × 647 |
Anwendung
- Gerät und Ausrichtung wählen, um die Referenzwerte zu sehen.
- In der Demo sichere Ränder umschalten und Abstände vergleichen.
- CSS oder Tailwind kopieren und im Zielbrowser testen.
Beispiel
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
Details und Einschränkungen
CSS-Pixel, native Punkte und physische Pixel sind unterschiedliche Einheiten. Das iPhone 13 mini rendert mit 3× und verkleinert auf die native Auflösung.
Betriebssystem, Zoom und Browserleisten beeinflussen die Werte. Die Kameradarstellung ist keine exakte Designvorlage.
FAQ
Warum zeigt mein Browser 0px?
Ein rechteckiger Viewport benötigt möglicherweise keine sicheren Ränder. Ein gewähltes iPhone-Profil ändert die reale Browserumgebung nicht.
Kann ich unten 34px fest einstellen?
Nutzen Sie env(safe-area-inset-bottom, 0px) mit Ihrem Abstand, damit das Layout auf andere Geräte und Ausrichtungen reagiert.
Ähnliche Tools
Tool-Seite aktualisiert: