Unless you’re off on a remote island and you’ve dismissed all technology from your life (props for somehow making your way here), I’m sure that by now you’ve heard of the upcoming iPhone X and it’s edge-to-edge display. In their effort to make a true all-screen phone, Apple introduced a “notch” that takes up part of the screen, encapsulating the front camera and additional sensors.

Pretty interesting from a design standpoint, but I’ll cut to the chase: This directly affects how our websites get formatted on these devices — it’s a pretty big deal.

Default Website Formatting on iPhone X
Default Website Formatting on iPhone X

You can see Safari adds default margins in order to buffer the safe areas of the notch.

So for those who craft the web, we could choose to continue designing as is and let the browsers make design decisions for us. Or we could come to terms with reality, accept the next generation of device screens, and take full control of our designs. (What do you think I’m advocating for?)

Regardless of our opinions of Apple’s approach, the fact is that at the time of writing this post, Safari takes up 51.24% of the mobile market share here in the United States, and 17.74% world wide — a ton of people are going to be viewing our websites through these displays.

No need for a complete overhaul of your existing code base, though. You can embrace the notch with two simple code changes.

Remove default margins with viewport-fit=cover

Based on the CSS Round Display Spec, we’re able to get websites to take up the entire screen by adding viewport-fit=cover to the viewport meta tag in the <head>. Here’s what mine looks like:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

This descriptor, viewport-fit, accepts two other values: auto, the default behavior, and contain which, according to the CSS Working Group, is when “the initial layout viewport and the visual viewport are set to the largest rectangle which is inscribed in the display of the device.” I’m not entirely sure what that means, but in this case it seems to have the same result as default.

Getting back on track here… Now our website covers (get it?) the screen in its entirety. We now have make sure that the notch doesn’t interfere with any elements on the website — remember, those default margins were there for a reason.

Website Formatting on iPhone X w/ viewport-fit=cover
Website Formatting on iPhone X w/ viewport-fit=cover

Avoiding Safe Areas with constant()

Apple introduced constant(safe-area-inset-*), which resolves to the dimensions needed by the user agent or browser to avoid the notch and other safe areas of the phone.

.inner-wrap {
  padding:2.5em constant(safe-area-inset-right) 2.5em constant(safe-area-inset-left);
}

Our content is now respecting the safe areas defined by the UA.

Website Formatting on iPhone X w/ viewport-fit=cover and constant()
Website Formatting on iPhone X w/ viewport-fit=cover and constant()

At first, I wanted to bypass constant() and just use good ol’ ems/rems. The problem is that the dimensions of these safe areas will most likely change when other devices introduce safe areas and future versions of the iPhone are released. Avoiding constant() would be the equivalent of designing fixed-width mobile websites to only fit the iPhone.

Even if you were to take this approach today, the dimensions of the safe areas change when you go from landscape to portrait.

Fallback for constant()

Browsers that don’t support constant() will display a value of 0 (that’s pretty much every browser except Safari at the time of writing this post). The following does the trick for me:

.inner-wrap {
  padding:2.5em 1.5em 2.5em 1.5em;
  padding:2.5em constant(safe-area-inset-right) 2.5em constant(safe-area-inset-left);
}

Dimensions in Pixels

I was able to get a list of dimensions from the iPhone X Simulator in Xcode, and now, I’m sharing it with you.

iPhone X Safe Area Dimensions
iPhone X Safe Area & Element Dimensions

Elements

Element Landscape Portrait
Notch 31x209 31x209
Home Screen Indicator 5x209 5x133

Safe Areas

Area Landscape Portrait
constant(safe-area-inset-top) 0 0
constant(safe-area-inset-right) 44px 0
constant(safe-area-inset-bottom) 21px 34px
constant(safe-area-inset-left) 44px 0

Closing Thoughts

Were the design decisions made by Apple the correct ones? Maybe. Will this change the way we build websites? Yes, but so did responsive web design back in 2011 and Progressive Web Apps within the last year at a much larger scale. The reality of it is that we’re part of an unpredictable industry; learning and adopting are the two habits that keep us afloat.

Let’s take this change with a grain of salt and prep for what the future of mobile devices may have in store.

Resources


Julian Gaviria

I'm Julian, Director of User Experience at THOMASNET.com. I touch on topics such as UX/UI design, front-end development, and whatever I'm working on at the moment. If you want a heads up as soon as I publish something, .

Latest stuff I've written

User-Friendly Exit Intent Modals

User-Friendly Exit Intent Modals

As users, we hate popups. We never click on them. They’re annoying. They get in the way. But as conversion rate optimizers, they just work.