Dr. Strangehump or How I Learned to Stop Worrying and Love the Notch

Love it or hate it, the now iconic notch in Apple’s iPhone X is here to stay. Let’s take a look at new webkit-specific properties that will help make your site and the notch look great together.

If you’re lucky enough to have your iPhone X already, you’ve probably noticed some apps and websites aren’t quite ready for prime time. We took the opportunity to take Apple’s new viewport and CSS properties for a spin while building out a branded launch page for cutting-edge biotechnology firm Akouos.

For websites, landscape mode is where things are going to break down a bit. Here, you can see that ugly white borders appear to the left and right of our site. This is worse than letterboxing standard def content on a 4k screen.

Website on iPhone X with White Borders

We can control this a bit with standard CSS by changing our html or body background color to better match our content.

Website on iPhone X with Colored Borders

Still, this doesn’t feel quite as immersive as it could. Enter our new viewport tag, viewport-fit, which we’ll add to our viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Website on iPhone X Using Viewport-Fit Meta Tag

Wonderful! Now we’re getting somewhere. But the text is going to start feeling a little cramped up against that notch.

With the release of iOS 11, Apple has added the new webkit-specific function
env() and a set of four environment variables, safe-area-inset-left
,safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. These allow Safari to provide a safe inset based on the device’s orientation, so you can be sure the notch or the new home button gesture are protected.

For our purposes, we’re really only concerned with the left and right sides of our content, so we’re going to add the following to our CSS:
body {
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
}

Note: iOS11 uses constant() as its function of choice, but starting with iOS11.2, this will be renamed env().

Now that’s beautiful!

Website on iPhone X using CSS env() function for proper inset spacing.

This is a pretty basic example, of how to update your site to be notch-friendly. We find these little details go a long way, especially when doing work for technically advanced clients like Akouos!