The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn't cause an issue when viewing websites in portrait but by default does cause some issues in landscape.

To accommodate the notch iOS 11 constrains websites within a "safe area" on the screen. On most websites this results in letterboxing on the left and the right.

Thankfully there are two simple fixes that can be made to solve this letterboxing.

background-color

If your website uses a single solid colour for its background then the best and easiest solution for you is to set a background-color property on your body tag. That results in the following on the above website.

As you can see the margins are left intact but are now filled with the correct colour.

viewport-fit

If you prefer to have extra control over your design or you're using a gradient or image as the background then setting a background-color might not be viable. Thankfully Apple added a solution to this (and forgot to document it).

Simply adding viewport-fit=cover to your viewport meta tag will expand your site to fill the entire screen and not just the safe area.

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

That results in the website rendering like this:

Obviously the design will now need some manual adjustment to accommodate the notch but how that is handled is now down to the developer/designer.

safe-area-inset-*

In order to handle any adjustment that may be required iOS 11's version of Safari includes some constants that can be used when viewport-fit=cover is being used.

• safe-area-inset-top
• safe-area-inset-right
• safe-area-inset-left
• safe-area-inset-bottom

This can be added to margin, padding, or absolute position values such a top or left.

I added the following to the main container on the website.

padding: constant(safe-area-inset-right);  

This resolved the issue I had with the menu and social media icons perfectly.