Mobile-safe layouts: taming notches and cutouts 📱
Using viewport-fit, safe-area-inset and safe-area-max-inset to keep interfaces clear of cutouts and system UI.
Modern smartphones are a whole menagerie of cutouts, cameras and floating system buttons that are always trying to cover up the interface. To keep elements from sliding under a notch, it is important to handle safe areas correctly.
The Polypane blog has published an excellent breakdown of working with safe-area-inset.
The main points from the article:
- viewport-fit=cover is the foundation. Without this parameter in
<meta viewport>, the browser simply adds empty margins on the sides instead of using the full screen area. - env(safe-area-inset-*) provides the variables for controlling spacing at the top, bottom and sides.
- CSS: a reminder of how to elegantly combine system spacing with your design using
calc(1rem + env(safe-area-inset-bottom)). - New: safe-area-max-inset-*: variables that solve the problem of a “jumping” interface. Unlike standard insets, they do not change dynamically when the address bar hides during scrolling.
If you are still setting fixed spacing by eye, this is a great reason to switch to system variables and forget about problems across different iPhone and Android models.