How do I handle the iPhone notch and Dynamic Island in CSS?

Use env(safe-area-inset-top) and env(safe-area-inset-bottom) for padding, with a sensible fallback value. Add viewport-fit=cover to your viewport meta tag, otherwise the insets always report zero.

Should content go behind the notch?

Backgrounds and scrolling content, yes — that is what gives a modern full-bleed look. Anything interactive or essential should stay inside the safe area, because the hardware genuinely occludes those regions.

How big are the safe area insets on a modern iPhone?

Roughly 59–62 points at the top for the Dynamic Island and 34 points at the bottom for the home indicator. Older notched models are closer to 47–50 at the top.

floow.design

Notch & Safe Area Simulator

Preview your screen against real notches, Dynamic Islands and home indicators.

Preview freeSign up to copy the safe area CSSNo usage limits

Drop a screen to overlayProcessed in your browser — nothing is uploaded

DeviceShow safe area boundaries

iPhone 16 Pro Max

440 × 956 pt @3x

Safe insets: 62pt top, 34pt bottom

Cutout: Dynamic Island

Let backgrounds run edge to edge behind the insets, but keep anything tappable inside the safe area.

Overlay your screenshot with the notch, Dynamic Island, punch-hole camera and home indicator of real devices, with the safe area boundaries drawn on.

Cheaper than discovering in review that your close button lives underneath the Dynamic Island.

What a safe area inset is

The safe area is the part of the screen guaranteed not to be covered by hardware or system UI. Insets describe how far in from each edge that boundary sits — larger at the top where the camera housing lives, and at the bottom where the home indicator sits. Both platforms expose them to your layout, and CSS reads them through env(safe-area-inset-*).

What actually breaks

Three things, repeatedly: a top-left back button colliding with the notch, a bottom action bar sitting under the home indicator, and full-bleed imagery with its subject cropped by the island. All three are invisible in a flat mockup and obvious the moment a device frame is overlaid.

Backgrounds through, controls inside

The correct pattern is to let backgrounds and scrolling content extend edge to edge behind the insets, while keeping anything interactive or essential inside the safe area. That gives you a modern full-bleed look without putting a tap target somewhere the hardware occludes.

How to use the notch & safe area simulator

Drop in a screenshot of the screen you want to check.
Select the device whose cutout you are designing against — start with a Dynamic Island model.
Keep the safe area overlay on and look for controls or text inside the red bands.
Move anything interactive out of the insets, but let backgrounds keep running edge to edge.
Copy the safe area CSS, which uses env() with your device's values as a fallback.

Use it with

Device Size Reference — Screen dimensions, logical points, pixel density and safe areas for current iPhones and Android handsets.
Phone Mockup Generator — Drop a screenshot into a realistic iPhone or Android frame and export it ready to post.
App Store Screenshot Sizes — Required screenshot dimensions for the App Store and Google Play, with counts and limits.

Frequently asked questions

How do I handle the iPhone notch and Dynamic Island in CSS?: Use env(safe-area-inset-top) and env(safe-area-inset-bottom) for padding, with a sensible fallback value. Add viewport-fit=cover to your viewport meta tag, otherwise the insets always report zero.
Should content go behind the notch?: Backgrounds and scrolling content, yes — that is what gives a modern full-bleed look. Anything interactive or essential should stay inside the safe area, because the hardware genuinely occludes those regions.
How big are the safe area insets on a modern iPhone?: Roughly 59–62 points at the top for the Dynamic Island and 34 points at the bottom for the home indicator. Older notched models are closer to 47–50 at the top.