Enable edge-to-edge layout deliberately
Use viewport-fit=cover only when the design needs to extend to the screen edges.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">Combine design spacing with safe spacing
Keep the intended minimum padding and use max() so a larger environmental inset can override it.
.bottom-actions {
padding-bottom: max(16px, env(safe-area-inset-bottom));
}Prioritise exposed components
- Fixed top navigation and back buttons
- Bottom calls to action and tab bars
- Full-screen media and maps
- Left and right controls in landscape
Visualise insets during QA
Temporarily add translucent fills or dashed lines around inset areas. Test portrait and landscape, then remove the debug styling while keeping adaptive padding.