Today, the team behind Safari’s web browser engine, WebKit, have detailed how designers should be building sites for the iPhone X. The upcoming iPhone’s sensor housing, aka “notch,” has presented new challenges for designers and developers alike. This has left some implementing creative “solutions” for the problem. Having WebKit lay out some official guidelines for the iPhone X should help web developers around the globe.
The documentation today is similar to what Stephen Radford had previously dissected within CSS. The WebKit blog explains that to start, developers should take advantage of the full size of the iPhone X in landscape orientation. To do that, developers need to implement viewport-fit=cover in their site’s meta tag. Without that, sites may not stretch and utilize the full width the display and end up looking strange.
Once the viewport is adjusted, content may now appear hidden under the sensor housing and home indicator. Apple notes that the next step here is to account for the iPhone X’s safe area. By accounting for the safe area, a web developer can web sure that content won’t be obscured by the sensor housing, home indicator, or rounded corners.
This is the crux for designers; for its bezel-less design, the iPhone X just reintroduces bezels into its software.
From Apple’s Designing websites for iPhone X:
With just those two changes, web developers can adapt their sites to look as good as possible on the new iPhone X. Curiously, Apple also makes mention of the min() and max() functions. Both of which are relatively new to CSS, yet neither is available in Safari 11 or iOS 11. (Apple states that they’ll be available in a future version of Safari Technology Preview.)
