Handling Notch on iPhone X, XS, XR, XS Max

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 (b.t.w, you should be on Dev blog if you aren’t already!), for example:

The header ends abruptly both on left and right hand side, leaving behind a feeling of a bug in the layout. The 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 the websites above do have their header width set to 100% in the layout. So there is an expectation for the header to occupy full width of the screen. It is just that browsers like Safari and 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.

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:

/* scss snippet */

@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 special hacks like safe-area-insets .

<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>

That’s howBubblin Superbooks scales from Apple Watch to the iPad to desktop all the way up to television sets. :tophat:

There are some other fancy solutions around the notch out there using JavaScript but then less code implies more maintainability. And similarly, less CSS => more scalability.

That’s all for now folks. :heart:

Follow me on Twitter or on Github .

P.S.:Did you know thatBubblin Superbooks is to books what Jekyll is to blogs?