Safe Area Preview Tool
Visualize how notches, dynamic islands, rounded corners, and gesture bars carve away usable space before you ship edge-to-edge mobile layouts.
Preview safe-area boundaries across devices
Inspect top, bottom, left, and right inset behavior for popular iPhone and Android device classes. Use this to sanity-check edge-to-edge layouts, fixed headers, bottom tabs, and full-screen splash screens.
Remaining content viewport after insets are respected.
Use these as padding guards for full-bleed mobile layouts.
iOS · Portrait
Keep fixed controls and bottom tabs inside the green guide, especially on gesture-navigation devices.
Inset checklist
Account for status bars, notches, and dynamic-island cutouts before placing close buttons or headers.
Reserve enough bottom padding for home indicators, gesture bars, and tab bars on edge-to-edge layouts.
Side insets matter more in landscape, especially on devices with cutouts and rounded corners.
More Mobile Dev Tools
DP to PX Converter
Convert Android density-independent pixels into device pixels.
PX to DP Converter
Turn raw pixel measurements back into Android dp units.
SP to PX Converter
Preview Android typography values across density and font scale.
PX to SP Converter
Reverse Android text pixels into scale-independent units.
Why preview matters
Safe-area issues often show up late, especially in fixed headers, bottom sheets, video players, onboarding flows, and full-screen splash experiences.
Use it during design and QA
Designers can plan padding earlier, and developers can use the same preview to check whether their edge-to-edge layout logic is giving fixed UI enough breathing room.