02 October 2017

WebKit Blog: “Designing Websites for iPhone X”

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

The inset area is filled with the page’s background-color (as specified on the <body> or <html> elements) to blend in with the rest of the page. For many websites, this is enough. If your page has only text and images above a solid background color, the default insets will look great.

Timothy Horton

If you haven’t read this so-called guide yet, this is as far as you need to go. The solutions that follow are increasingly worse:

  1. Using the Whole Screen causes some of the page’s content to be hidden under the notch.
  2. Respecting the Safe Areas recommends a new WebKit-only CSS function that the standardization body decided to adopt under a different name – expect incompatibility problems as this rolls out to other browsers. On top of that, this may break layout on regular iPhones, and probably other smartphones.
  3. Bringing it All Together – and finally for the cherry on top: CSS functions no current browser supports, not even iOS 11 Safari!
Safari’s default insetting behavior.

Oh well, goes to show how much Apple actually cares about the web. Then again, the iPhone X notch is so bad, app developers are also having a hard time designing around it, so maybe it’s just really bad design.

Update: to be fair, support for the CSS functions mentioned in the article is coming in the next Safari Technology Preview. Still baffled that it wasn’t added before launching the device.

Post a Comment