Safe Area Inset Preview: Notch, Dynamic Island and Home Indicator

Pick an iPhone and an orientation to see where the notch or Dynamic Island, rounded corners and home indicator cut into the screen, with each inset in CSS pixels — and copy the CSS that keeps your content clear of them.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

/* Keep text clear of the notch / Dynamic Island in landscape */
.site-header,
.content,
.site-footer {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Fixed bottom bar: buttons stay above the home indicator */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 56px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Leave room so the last content is not hidden behind the bar */
body {
  padding-bottom: calc(56px + max(16px, env(safe-area-inset-bottom)));
}

How safe areas work

Recent iPhones aren't rectangles: they have rounded corners, a notch or Dynamic Island, and a home indicator bar at the bottom. The safe area is the part of the screen none of these cover, and the four insets are the distances from each edge to it, in CSS pixels. Pages read them with env(safe-area-inset-top), -right, -bottom and -left.

By default you don't have to do anything: Safari keeps the page inside the safe area and fills the bands beside it with the page's background color. Adding viewport-fit=cover to the viewport tag lets the page draw across the whole screen — and makes keeping text and buttons out from under the hardware your job (WebKit: Designing websites for iPhone X). So the two always go together: the tag, and padding with env().

Reading the drawing

In portrait the top inset covers the status bar and the notch or Dynamic Island, and the bottom inset the home indicator; left and right are 0. Turn the phone and the cutout moves to the side: now the left and right insets are large (47 to 68 px) and text next to them is what gets cut off. That is why the CSS pads left and right with max() on everything that touches the edges, not only the header.

The numbers are the system safe area of the whole screen, the values a full-screen app — or a home-screen web app with viewport-fit=cover — receives. Inside Safari, the browser's own bars take parts of the screen, so the value your page reads at an edge can be smaller and changes as the toolbar collapses. That is another reason to always use max() and never hard-code these numbers.

Insets by model

System safe-area insets in CSS pixels (points), for every model whose portrait and landscape values we could verify. Models with a Home button (iPhone SE, 8 and earlier) have no cutout or home indicator; only their status bar can produce a top inset. Values are those of the iOS version each model launched with; on iOS 26 a landscape top inset of 20 has been measured on the iPhone 17 family and the Air, and developers report it on older models too.

Sources: Keith Harrison's screen-size references, measured in Apple's iOS Simulator — iPhone X, iPhone 12, iPhone 13, iPhone 14, iPhone 15, iPhone 16 and iPhone 17 (useyourloaf.com); XS Max, XR, 11 and 16e from safearea.info. The iPhone 17 models and iPhone Air report a 20 px top inset in landscape on iOS 26.

On iPhone vs Android

• iPhone: the insets above apply in Safari and in home-screen web apps. In landscape the side insets matter most; in portrait the bottom inset matters for fixed bottom bars and floating buttons, and the top inset only when the page draws under the status bar, as a home-screen web app with viewport-fit=cover does.
• Android: Chrome uses the same env(safe-area-inset-*) variables. A camera cutout — a notch or punch hole — produces an inset when the page is drawn under it, for example in fullscreen with viewport-fit=cover. From Chrome 135, on phones Chrome can also draw the page under the gesture navigation bar: pages with viewport-fit=cover then get a bottom inset that changes as Chrome's bottom bar moves away. Many Android setups simply report 0, which the max() fallback handles.

How to check it

Safe areas depend on the physical screen. MobileCheck's emulated browsers have no notch, so in a report the insets are 0: the free check shows that your padding fallbacks work at each device's size, but not what sits under a notch. For that, open the page on a real iPhone in portrait and landscape and scroll so the toolbar collapses, or use Apple's iOS Simulator in Xcode on a Mac. The safe area insets guide walks through headers, bottom bars and common mistakes, and the viewport units visualizer covers the toolbar's effect on height.

More free tools: color contrast checker · tap target size checker · mobile font size calculator · css media query generator · device mockup generator · viewport units visualizer · responsive image srcset generator · link preview checker · ai crawler access checker · image alt text checker · all tools