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.
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.
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. In the latest version of iOS Apple have added the
viewport-fit descriptor from the CSS Round Display Spec.
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.
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.
This can be added to
padding, or absolute position values such a
I added the following to the main container on the website.
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
This resolved the issue I had with the menu and social media icons perfectly.
UPDATE: Example was changed to use the correct constants on all sides and to reference the correct CSS spec for