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.

Booking.com’s homepage as it would appear on the iPhone X by default.

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 padding CSS 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 .

Booking.com’s viewport meta tag, with viewport-fit=cover added.

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.

Booking.com with viewport-fit=cover enabled.

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:

The implementation of the env() function and the environment variables used for Booking.com.

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

All of the 4 new environment variables.