The iPhone X Screen and Websites

A new shape of screen

The iPhone X went on sale on Friday. Its screen runs almost to the edges of the phone, with rounded corners and a cut-out at the top for the camera and sensors that most people are calling the notch.

Held upright in Safari, a website looks much as it does on any recent iPhone, only taller. The notch sits above Safari's address bar, and the page starts below both.

Turned sideways, the notch moves to one side of the page and the rounded corners sit beside the content. That is where websites can look different.

Most need no change at all. Some look unfinished, and the difference comes down to how the design uses colour at its edges.

What Safari does by default

Apple planned for existing sites. When the phone is sideways, Safari keeps the page inside what it calls the safe area, clear of the notch and the rounded corners.

The strips left over at each side are filled with the page's background colour, the one set for the page as a whole.

For a page of text and images on a plain background, the result looks deliberate. Nobody would notice.

Which sites look unfinished

• Coloured header bands that stop short of the screen edges.
• Full-width photographs framed by plain strips at each side.
• Dark sections on a page whose background is set to white.
• Footers in a brand colour sitting between pale side margins.
• Bars fixed to the bottom of the screen, such as a call button.

The third is the one most designs have. The page background is usually white, so every dark band shows white strips beside it when the phone is sideways, and the design looks cropped.

The setting that fills the screen

A site can ask Safari to use the whole screen by adding viewport-fit=cover to its viewport tag, the line in the page's code that tells phones how to size the page.

Backgrounds then run to the edges. So does everything else, including text and buttons, which can end up behind the notch or clipped by a corner.

To prevent that, the style sheet adds padding using safe-area inset values, which tell the page how much room the notch, the corners and the home bar take up on that phone in that orientation.

Backgrounds fill the screen; content stays inside the safe area. The way these values are written is already changing in an upcoming iOS update, so this is a job for someone who follows the details.

The mistake to avoid

Adding viewport-fit=cover without the padding is worse than leaving it out.

The page fills the screen, and the first letters of the menu, the logo or the phone number slide behind the notch. Turned one way the page looks fine; turned the other, it does not.

A theme update or a snippet copied from a forum can add the setting without the padding, so check the phone sideways after any change to the theme.

Bars fixed to the bottom

Many sites pin a call or booking button to the bottom of the screen on phones.

With viewport-fit=cover, that bar also needs padding beneath it, or its button sits on top of the short bar used to return to the home screen and invites the wrong swipe.

Test it after scrolling as well, since Safari's own toolbars appear and disappear as the visitor moves through the page.

A worked example

A tattoo removal clinic's site had a dark navy header and footer, a white page background, and a gallery of before-and-after photographs set on navy panels.

People looking at the gallery on a phone often turn it sideways to see the photographs larger.

The clinic's web designer previewed it in Apple's simulator in October. With the iPhone X held sideways, each navy band stopped short of the screen edges, with white strips beside it, like a page printed with the margins wrong.

A first attempt added viewport-fit=cover on its own. The bands filled the screen, and the clinic's phone number in the header slid behind the notch whenever the phone was turned one particular way.

The lasting fix added safe-area padding to the header, the gallery panels, the footer and the fixed book a consultation bar.

It was checked both ways in the simulator, then on a real phone the day the iPhone X went on sale.

The bands now reach the edges, and the text and buttons stay clear of the notch and the corners.

Testing without the phone

Not everyone has an iPhone X yet, and few offices will buy one to test a website.

Apple's simulator, part of the free Xcode tools for the Mac, includes the iPhone X and shows the notch and corners in both orientations.

Otherwise borrow one. Ten minutes turning it both ways on the main pages finds most problems.

Upright, and taller

Upright, the iPhone X is the same width as an iPhone 8 but taller, so more of the page shows at once.

Designs that fill the first screen with a photograph sized to the height of the window will show a taller, narrower crop of it. Check that the subject of the photograph survives.

What not to change

There is no need to redesign for one phone. The default handles nearly everything, and most visitors will hold it upright most of the time.

Do not detect the model to serve a different page, or add special layouts for the notch. Those fixes age badly and break on the next phone.

The safe-area approach works because it asks the phone for its own measurements rather than assuming them.

The counter-case

For a site with a plain background and no coloured bands, the right change is none. Safari's default was designed for exactly that page.

A site about to be replaced can wait for the new design, provided the new one is checked sideways on the phone before launch.

And a business whose visitors mostly want a phone number, rather than a gallery, has less to gain. For everyone else: check the phone sideways, and if the bands look cut, add the setting and the padding together.

The sideways check

1. Open the home page on an iPhone X, sideways.
2. Turn it both ways, notch left and right.
3. Look for strips beside coloured bands.
4. Check any fixed bar at the bottom.
5. Add viewport-fit=cover only with safe-area padding.
6. Test in Apple's simulator if nobody has the phone.
7. Recheck sideways after every theme update.

Step five matters most, because the setting on its own turns a cosmetic problem into a practical one: a phone number behind the notch is worse than a white strip.

Checking designs on the devices customers actually hold is the same habit as in pages designed on a Mac and viewed on Windows.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.