Raise your hands if you love the notch on iPhone X, XS, XR or XS Max! ?♀️?♂️
Okay. Not many hands went up there, but I'm sure as a web developer (or designer) you will definitely love some extra real estate to play around with? A beautiful edge-to-edge display—well, almost—makes the notch at the top of the bezel disappear for most mobile users. At least to me the notch has never posed a problem.
As long as I am surfing the web in portrait mode most websites look and work great, and the notch doesn't appear on my list of nits to worry about for most of the time.
But it is the landscape mode where the notch pokes in the eye. Take a look at the Dev blog site, for example:
If you look closely, you'll notice that the header ends abruptly, both on the left and the right hand side, leaving behind a feeling of a bug in the layout. This happens even when
width: 100% is specified on CSS, which is kind of super weird.
The situation is worse for Youtube:
A large header hanging in the middle of the screen is terrible, I'd say.
It feels particularly bad on Youtube because we normally watch videos in landscape mode and after every video you get to see this blunt rectangle in blood-red color with sharp corners. The header isn't applied to the entire width of the screen as expected, even when Youtube has its width set to 100% in the layout.
The rule fails on a notched phone.
There is blank gutter area on both sides of the webpage because mobile browsers like Safari (on iOS 12+) and Chrome v69 or higher on notched phones introduce/force these white bars on the webpage by adding a little bit of extra margin. They do this to avoid older content getting obscured by the notch but it also means that some of our basic assumptions about the web are no longer true. That setting width of an element to 100% will no longer stretch the element to occupy the full screen width of the device. Weird, I know!
This extra margin thing is called a
safe area margin, and is meant for non-rectangular screens. Now the question is how to handle the notch correctly for your website and can you do it without using any sort of non-standard hacks like the
safe area margins?
viewport-fit meta tag!
Here's a simple fix to use all the extra space:
To tell the browser to expand into the display cutout (notched) area, set the
viewport-fit property to
cover like so:
This should do the trick, especially for the
sticky header on top, but also for the rest of the content on page. If you want to apply full screen width just to the header but avoid the body or main content from going under the notch, you can use an environment variable (not recommended) on a css class like so:
Basically, there are four options to handle the notch from all four sides of the notched mobile, providing a safe area for the webpage's overall environment. While these insets do solve rendering content away from the notched region mostly, it is generally not recommended to use these properties (special hacks) created specifically for non-rectangular viewports simply because they are non-standard.
There's a much simpler solution to avoid the clash of notch with content using simple and _standard_ CSS rules. For our solution we'll use ordinary
width definitions per single
@media-query, like so:
That's it! And then in your HTML, the
main container element can sit with css classes
shrink center to work across all devices and all viewports with just one definition.
<header> <!--Sticky header with 100% width running across the notched screen --> <header> <main class="shrink center"> <!-- Body here --> </main> <footer> <!-- Full screen width under the notch --> </footer>
I prefer handling the notch this way because it helps us avoid using device specific hacks (the
safe-area-insets) on our layout. That's how Bubblin scales from an Apple Watch to the iPad to a desktop all the way up to an OLED TV. ?
There are few other solutions floating around on the web that solve the same problem using
That's all for this post folks.
Now, remember this… when the notch pokes you in the eye again, you poke them back! ❤️