iPhone Safe Area Simulator & CSS Generator
Compare iPhone safe area insets in portrait and landscape. Preview fixed-button overlap and copy responsive CSS or Tailwind code.
Runs in your browser · No account needed
Diagram only; camera cutout and corners are illustrative.
Reference insets pt
- Top
- 0
- Right
- 84
- Bottom
- 34
- Left
- 0
- Logical screen
- 466 × 678 pt
- Safe dimensions
- 382 × 644 pt
- Native resolution
- 1398 × 2034 px
- Render scale
- 3×
Data updated
iPhone Duo logical sizes and insets use iOS 27.1 simulator references; landscape uses the landscape-left layout. The inner display keeps the status bar visible. Dark blocks mark system reserved regions. Its 669 × 951 pt simulator layout and official 1878 × 2670 px panel resolution are separate values, not a direct 3× conversion. This page shows fully open and closed states, not physical-device measurements.
Adaptive layout code
The code uses live env() values, not the selected device’s fixed numbers. Spacing changes the output; the demo switch only compares layouts. The page reserves room for the fixed bar and its 44px button. Test taller content, Safari and PWA behavior in your project.
This browser’s safe area
Reading browser values…
Live CSS px from this browser, independent of the selected preset. Zero can be correct on desktop or within a rectangular viewport. Values may change when you rotate or resize; this does not identify your device or emulate Safari.
iPhone safe area reference table
Portrait values in logical points (pt), at standard display zoom with the status bar visible. Safe dimensions subtract the two corresponding insets from the logical screen size. Presets do not replace device testing.
| Device | Logical screen | Top (pt) | Bottom (pt) | Left (pt) | Right (pt) | Safe dimensions |
|---|---|---|---|---|---|---|
| iPhone Duo · Outer · Closed | 466 × 678 | 0 | 34 | 0 | 84 | 382 × 644 |
| iPhone Duo · Inner · Open | 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 |
How to use
- Select a device and orientation to inspect its reference dimensions.
- Open Layout demo, toggle safe area insets and adjust spacing to compare the button’s position.
- Copy CSS or Tailwind code, then check it on your target browser and device.
Example
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
Details and limitations
CSS px, native layout points and physical pixels are different units. iPhone 13 mini renders at 3× but downsamples to its native resolution.
Safe areas can change with OS versions, display zoom, browser controls and app layout. The illustrated cutout is not a production design template.
FAQ
Why does this browser show 0px?
A rectangular viewport may have no unsafe region. Desktop browsers often return zero even when you select an iPhone preset; changing a preset does not change your browser.
Can I copy a fixed 34px bottom padding?
Use env(safe-area-inset-bottom, 0px) with your own spacing. A fixed value does not adapt to landscape, other devices or different browser conditions.
Related tools
Tool page updated: