What are safe area insets?

Glossary · Updated October 23, 2026 · Also called: env(safe-area-inset-*), safe area, viewport-fit=cover

Definition Safe area insets are four CSS environment variables, env(safe-area-inset-top), -right, -bottom and -left, that give the distance from each edge of the screen to the area not covered by hardware or system UI such as the notch, Dynamic Island, rounded corners and the home indicator. They are non-zero only when the page opts in with viewport-fit=cover in the viewport meta tag.

How to fix it: Safe Area Insets: Keep Content Clear of the Notch and Home Bar

How do safe area insets work?

By default, a web page on iPhone is drawn inside a safe rectangle: in landscape, Safari adds empty bars beside the notch, and the page never reaches under the rounded corners. That keeps content visible but can look boxed in. Adding viewport-fit=cover to the viewport meta tag lets the page fill the whole screen; the browser then reports how much of each edge is unsafe through the four env() variables, and it is your job to pad content by that amount.

Typical values on a recent iPhone in portrait are a top inset of about 44–62 px (more on Dynamic Island models) and a bottom inset of about 34 px for the home indicator; in landscape, left and right insets cover the notch side. When the browser's own toolbars sit over an edge, that inset is usually 0, because the toolbar already keeps the page clear.

Example

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

.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 12px max(16px, env(safe-area-inset-right))
           calc(12px + env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
}

env() accepts a fallback (env(safe-area-inset-bottom, 0px)), and max() keeps your normal padding when the inset is smaller. Elements most at risk are fixed bottom bars, sticky headers and full-screen menus.

On iPhone vs Android

Safari has supported the variables since iOS 11.2, introduced with the iPhone X notch. Chrome and other Chromium browsers on Android expose the same variables for camera cutouts and, in recent versions, for edge-to-edge display; on many Android phones the values are simply 0. In a desktop browser they are always 0.

In MobileCheck

MobileCheck has no safe area check: its emulated phones have no notch, so every inset is 0 and a bar hidden behind the home indicator on a real iPhone looks fine in the report. Test notch layouts on a real device or in Apple's iOS Simulator (Xcode), in portrait and landscape.

Related terms

• Viewport meta tagThe viewport meta tag tells mobile browsers how wide to lay out a page. width=device-width, initial-scale=1 makes it fit the phone's own width.
• Viewport unitsViewport units size things relative to the viewport: 1vh is 1% of its height. svh, lvh and dvh pick the small, large or dynamic height on phones.
• Sticky headerA sticky header stays visible at the top while you scroll, built with position: sticky or fixed. On phones it can cover much of the screen.
• ViewportThe viewport is the area of the browser window where a web page is drawn, measured in CSS pixels: about 360–440 px wide on today's phones.

Guides and tools

• Safe Area Insets: Keep Content Clear of the Notch and Home Bar
• Safe area preview
• Device mockup generator

Sources

1. MDN: env()
2. WebKit: Designing Websites for iPhone X

All 27 glossary terms, A to Z