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
Timothy Hortonbackground-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.
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:
- Using the Whole Screen causes some of the page’s content to be hidden under the notch.
- 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.
- Bringing it All Together – and finally for the cherry on top: CSS functions no current browser supports, not even iOS 11 Safari!
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.
Can I just look at my layout on the landscape X and cry?
— Marco Arment (@marcoarment) September 30, 2017
I’m sure we’ll all like the notch eventually, but damn, landscape is just awful. pic.twitter.com/wwa3CQQv6U
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