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 developer you do love some extra "real estate" on your screen to be able to make use of. A beautiful edge-to-edge display—well, almost—makes the notch at the top of the bezel less of an eyesore for most people.
In fact, it's not even an issue for most websites in portrait mode.
Landscape viewing is where the notch pokes in the eye.
Take a look at dev.to for example:
I'm not sure if you can see in the image clearly but the header ends abruptly both on left and right hand side, leaving behind a feeling of a bug in the layout. This is truer and worse on Youtube.com:
Terrible.
The issue feels particularly bad on Youtube because I normally watch videos in landscape mode and after every video I get to see this glaring bug with blood red color all over it. 🤢
It's important to note here that all of the websites discussed above do have their header width set to 100% in their layout. So there is an understood expectation for the header to occupy full width of the screen. But that's not the case however. It's just that browsers like Safari and even Chrome v69 on iOS introduce these white bars by adding a little bit of extra margin to your page so that the content isn’t obscured by the notch.
They call it safe area margins.
Enter viewport-fit meta tag and CSS environment variables.
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:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
That should do the trick, especially for the sticky header on top. If you want to use the entire screen area but at the same time avoid content going under the notch, use css environment variables like so:
.content {
padding: 16px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Basically there are four CSS rule options to handle
the notch from all four sides of the iPhone. I don't
recommend using them though!
padding: env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);
*/
Another approach to solving left and right padding on the body of content correctly is to simply use width definitions per @media-query, like so:
@media only screen and (orientation: portrait) {
body {
.shrink {
width: 95%;
}
}
}
@media only screen and (orientation: landscape) {
body {
.shrink {
width: 90%; // Shrink a little extra to avoid the notch.
}
}
}
.center {
text-align: center;
margin: 0 auto;
}
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 rule definition. I prefer doing it this way to avoid using device specific hacks like safe-area-insets.
<header>
<!--Sticky header with 100% width across and above the notch -->
<header>
<main class="shrink center">
<!-- Body goes here -->
</main>
<footer>
<!-- Full screen width under the notch -->
</footer>
That's how Bubblin Superbooks scales from Apple Watch to the iPad to desktop all the way up to television sets. 🎩
There are some other fancy solutions around the notch out there using JavaScript but it's really not recommended. Overkill. Less code means better maintainability. And similarly, less CSS => more scalability.
That's all for now folks. Stay cool. ❤️
Follow me on Twitter or on Github.
This post originally appeared on The Bubblin Blog
Top comments (10)
Wow, this is definitely something I'd never considered before.
Thank you @ben . Hearts coming from you is such a good feeling!
Aww shucks
On the article, just to be clear that is… 😝
I can't believe the timing of this article.
I was JUST getting frustrated because a website I'm working on wouldn't scale nicely on mobile, turns out all I needed was to add that meta tag you mentioned.
Thank you for all the time saved :)
You’re welcome!
Yay, a next device we have to optimze for! /s
This reminds me of a good old days when optimizing for IE8/9 was a thing (its probably still is), but its a simple fix I guess.
Why the sarcasm? Diversity of devices on web is a good thing, it is the beauty of web! Yet another set of unique people to reach out to in a different situation.
Issues on IE 6, 7, 8, 9, 10 and 11 were that of non-compliance of web standards by Microsoft at a time when standards were in rapid motion and MS was all too powerful. The same can be said of Google today with its, for example, forcing amp on news-sites, breaking url handling in Chrome etc.
These issues have nothing to do with diversity of devices on web.
sucking up with the design. An amazing and interesting article to read 👏
So someone makes a terrible design decision with these smartphones and now everyone else has to redesign their websites?