Your content
padding: env(…)
Adjust a fake device — notch, home indicator, status bar, and viewport-fit — and watch env(safe-area-inset-top / right / bottom / left) update live. Red bands mark the pixels the browser would letterbox if you skipped the padding. The generated CSS uses max() for a graceful fallback and constant() for iOS 11 support.
viewport-fit=cover in your <meta name="viewport"> so the browser reports non-zero insets. Without it, the browser letterboxes the page and every env(safe-area-inset-*) resolves to 0px. The max(16px, env(…)) pattern guarantees a minimum comfortable padding on devices without a notch.
Introduced in CSS Environment Variables Module Level 1 and shipped by every modern browser since 2018, the env() function exposes user-agent metrics your stylesheet can adapt to. The four safe-area-inset-* values are set to the number of pixels between the visual viewport and the region unobstructed by hardware (notches, rounded corners, the iPhone home indicator) or software chrome. iOS 11 shipped an earlier prefix, constant(safe-area-inset-*), that's worth keeping in the fallback chain if you support that generation.
A common mistake is applying padding: env(safe-area-inset-*) without wrapping it in max(). On a phone without a notch, every inset resolves to 0, so your button sits flush against the edge. padding: max(16px, env(safe-area-inset-bottom)) keeps 16 px on plain devices and expands to whatever the OS requires on notched ones — the same rule works everywhere.