IPhone X - watch the notch

Mark Payne AL

In early November 2017, Apple releases the new iPhone X, an edge-to-edge rounded screen device that will bring immersive experiences to the users. The new device has big implications for how your website renders - that you need to know about and take into account now.

On their website, Apple affirms this phone was their long term vision and now it has become a reality. The home button functionality has been replaced by a series of gestures that have meant updated guidelines for mobile design and development. The new guidelines ask to avoid interactions that could interfere with the systemwide edge gestures, keep content in the safe areas, be mindful of aspect ratios, and to provide full-screen experiences.

One of the most notable aspects to consider when designing experiences for iPhone X, is the screen notch. Apple has placed the frontal camera, speaker and other sensors in the top-middle of the screen, much to the curiosity and attention of designers and developers.

There have been reports in social media channels that popular mobile apps are looking odd on the iPhone X screen. Instagram for example will require UI redevelopment work to optimise its interface for this device. Some other reports show Safari rendering webpages with white bars on each side of the browser when in landscape mode due to the notch. Designers and developers are now questioning if every website will render like that and what to do to avoid it.

Yes, chances are high that many websites will render with an unwanted gap on the screen edges. Even Apple’s website renders with the white bars in landscape mode. And yes, the good news is that there is an easy fix. Let’s say your responsive website was designed with a full width hero image, in portrait mode looks perfectly fine, but when you rotate the iPhone X to landscape mode it looks like this.

So, if it looks fine in portrait mode, then what’s going on? Well, the iPhone X screen edges are rounded and has the notch, the screen is no longer squared. Websites on the other hand are developed using the W3C HTML box model, which makes it a rectangle. A web browser trying to fit the HTML box model within a rounded screen will produce unwanted white space on the edges.

Back in 2014, Motorola introduced the first consumer ready rounded screen with the smartwatch Moto 360. Later the W3C, added CSS and viewport rules to support designs for non rectangular screens. We can use those rules to advise the browser how to render the web page on rounded screens devices like iPhone X.

By adding inside the viewport meta tag in the HTML viewport-fit=cover, the browser will adjust the HTML content to fill the screen. Now your website looks like this.


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

There is still a problem though; the notch! Without adjusting the paddings, the screen notch will interfere with your content.

iOS 11 Safari has constants that can be used to accurately apply content margin or padding to your HTML for iPhone X and keep your content within the safe areas exclusively.


.container{
    padding: constant(safe-area-inset-top) 
    constant(safe-area-inset-right) 
    constant(safe-area-inset-bottom) 
    constant(safe-area-inset-left);
}

Now the website should look sharp.


Want to make your website look awesome on the iPhone X? We are here to help.

How can we help you?