Set viewport-fit=cover in your viewport meta tag, then add padding with env(safe-area-inset-top), env(safe-area-inset-bottom) and the left and right equivalents to fixed elements. This keeps headers, bottom bars and buttons clear of the notch, the Dynamic Island and the home indicator.
When it matters
In a normal browser tab, the browser keeps your page below its own interface, so you rarely see the notch. It matters when your page extends to the screen edges: full-screen web apps, pages added to the home screen, and sites using viewport-fit=cover.
The two steps
- Opt in: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- Pad fixed elements: padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
Use a fallback
Combine env() with a minimum value so layouts keep their normal spacing where there is no cutout, for example padding-top: max(16px, env(safe-area-inset-top)).
See it before shipping
A device frame draws the notch or the Dynamic Island, so you can see what covers your header. The device sizes page lists the camera type of each device: check a notch iPhone, a Dynamic Island iPhone and an Android with a punch-hole camera.
Frequently asked questions
- What is env(safe-area-inset-top)?
- A CSS environment variable that gives the space at the top of the screen reserved by the notch or the Dynamic Island. It is 0 where there is no cutout.
- Why are my safe-area values 0?
- The insets only apply when the page extends under the cutouts, which requires viewport-fit=cover in the viewport meta tag.
- Do I need safe areas on Android?
- Mostly for full-screen web apps. In a normal browser tab the status bar stays above your page.
Install Mobile Preview from the Visual Studio Marketplace · Open VSX (Cursor, Windsurf, VSCodium) · Pricing
More: all guides · device sizes · The viewport meta tag explained: what it does and the one line you need · 100vh on mobile: why it overflows and how to fix it with dvh · Tailwind breakpoints vs real phones and tablets · A mobile checklist for AI-generated UI (what usually breaks first) · How to make a phone mockup screenshot of your website (free)