How we adapted the Booking.com mobile site for the iPhone X notch.
When Apple announced the launch of their latest flagship handset, the iPhone X, they promised it would set a new benchmark for mobile devices of the future. We decided that we had better get acquainted.
“A screen isn’t necessarily a rectangle anymore…”
Besides its huge edge-to-edge display, the most notable addition to this iteration of the iPhone is the so-called ‘notch’—officially known as the Sensor Housing. It rapidly became a hot topic of debate that presents an entirely new design challenge: a screen isn’t necessarily a rectangle anymore. Although this presents a far greater challenge for native apps, there are also some considerations to be made for the web. Whether it intimidates or inspires you, the sensor housing is here to stay, so right now is the perfect opportunity to provide a really neat experience for your customers that they might not be expecting.
My first thought was “it seems like a lot of work” — much like when I first learned about CSS media queries — but it’s much simpler once you learn (read: copy/paste) a couple of new CSS values. In fact, it’s so simple that I’ll teach you. (It’s also a good introduction to CSS variables—win-win!)
So, if you don’t have it already, download the latest Xcode, fire up Simulator, and let’s get stuck in.
The problem
When an iPhone X is rotated into landscape orientation, the areas available for content on the left and the right of the device are unequal, which means that depending on the absolute orientation of the device and the position of the sensor housing, the horizontal ‘safe areas’ for your site’s content are either 15px or 45px wide. Our data suggests that 5–10% of iPhone X users are using landscape orientation. Whether that’s due to the larger screen size or just to see what happens with the sensor housing is up for debate, but I’m glad that they’ll see a well-adapted site when they do.
iOS’s solution to this is to ‘pillarbox’ your pages to make sure all of the content remains visible. It’s a neat enough solution for mass support, but luckily Apple has provided some additional features to help make websites take full advantage of the edge-to-edge display.
The 2 elements
There are 2 basic elements to accommodating iPhone X’s sensor housing:
- A new viewport meta content property
- Four new values for the
paddingCSS property.
Viewport meta content
To start, find your viewport meta tag in your site’s <head>, and add the following property to the end of the content attribute: viewport-fit=cover.
This will tell Safari to ditch the pillarbox and allow your site’s content to run to the edges of the display. It’s at this point it becomes apparent why Safari squashes the content by default; part of the page is now hidden beneath the sensor housing notch. We need to add some smart padding in CSS to make sure that our content stays visible.
The CSS
We want to apply padding to the elements which are obscured by the sensor housing. Kindly enough, Apple has provided a CSS function and some pre-defined CSS variables to take care of the heavy lifting:env() and safe-area-inset-*.
Since env() is only available for devices running iOS 11.2+, you’ll also need to include constant() for fallback support for now. It seems that iOS 11.2 will continue to support constant(), so go with that if you can only implement one, but I recommend you include both.
I get that it sounds a bit complicated, functions and variables in CSS? But the implementation is the same as any other property-value pair in CSS:
You will probably need to experiment to find the best place to apply these new styles, as it will vary a lot depending on your design. In our case, we want the background colours to fill the screen while keeping the content constrained within the safe areas, so we applied the padding to the inner elements of our containers.
Tip: use Safari’s Developer Tools on your Mac to inspect the elements in iOS Simulator’s Safari (or that of any connected iOS device).
The result
After carefully placing your paddings in the proper positions, you will have transformed the experience for your users—from ‘squashed to fit’ to ‘made to measure’! Doesn’t it look beautiful?
If you‘d like to know more, head over to Designing Websites for iPhone X on the webkit.org blog, where they also go into detail around the complications introduced when combining min() and max() with the env() function for more complex layouts.
