Designing for the Notch: Safe Area Insets
How to use env(safe-area-inset-*) and viewport-fit=cover so your layout respects notches, rounded corners, and the home indicator.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
The problem notches create
Modern phones have notches, punch-holes, rounded corners, and home indicators that overlap the screen edges. If your full-bleed header or sticky footer ignores these, controls end up hidden behind the notch or under the home bar - tappable in theory, unreachable in practice. Safe area insets give you the exact padding needed to avoid them.
Notches and rounded corners clip edge content
The home indicator overlaps bottom-anchored UI
Full-bleed headers can hide behind the status bar
Affected areas vary by device, so hardcoding padding fails
viewport-fit=cover plus env() insets
First add viewport-fit=cover to your viewport meta tag so the page extends edge to edge. Then read the safe areas with the env() function and add them to your padding. Combining env() with a base value via max() keeps spacing sensible on devices with no inset.
Add viewport-fit=cover to the viewport meta tag
padding-top: env(safe-area-inset-top) for headers
padding-bottom: env(safe-area-inset-bottom) for footers
Use max(1rem, env(safe-area-inset-left)) for a sane floor
Test against real device frames
Safe-area bugs are invisible on a rectangular desktop window - you need a viewport that simulates the notch and home indicator. Sizzy renders devices with accurate frames and insets, so you can confirm your sticky header and bottom nav clear the hardware on the device classes your users actually carry.
Test on a device profile with a notch and home indicator
Confirm sticky headers clear the status bar
Confirm bottom navigation clears the home indicator
Check landscape, where left/right insets come into play
Release checklist
viewport-fit=cover is set when using edge-to-edge layouts.
Top and bottom fixed UI use env() safe-area insets.
max() provides a sensible fallback on inset-free devices.
Landscape left/right insets are handled for full-bleed UI.
Frequently asked questions
What is env(safe-area-inset-bottom)?
It is a CSS environment variable that returns the distance needed to avoid the bottom hardware area, such as the home indicator. Adding it to bottom padding keeps fixed footers and navigation reachable on notched phones.
Do I need viewport-fit=cover?
Yes, if you want content to extend edge to edge behind the notch. Without it the browser insets the page automatically and env() values resolve to zero. With it, you take responsibility for safe-area padding yourself.
How do I test safe area insets without the device?
Use a development browser that renders accurate device frames and insets, like Sizzy, so you can confirm headers and footers clear the notch and home indicator. Still validate on at least one real device before release.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.