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 iPhone X’s sensor housing will present design challenges for websites in their current form. Apple has attempted to mitigate this issue early by padding out a site’s content on either side. For sites that have full-width content, like 9to5Mac, this mitigation may be more unattractive than Apple intended. Many web developers may see themselves slightly tweaking their sites to look as good as possible on the upcoming iPhone X. The WebKit’s team post on designing for the iPhone X provides before and after examples of what developers could do.
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.
-
- Before code change
-
- After code change
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:
To achieve this, WebKit in iOS 11 includes a new CSS function, constant(), and a set of four pre-defined constants, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. When combined, these allow style declarations to reference the current size of the safe area insets on each side.
-
- Once viewport-fit=cover has been implemented
-
- iPhone X’s safe areas for web content
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.)
9to5Mac has been experimenting with our site’s code to account for the iPhone X’s sensor housing. While not technically challenging, it can prove to be significant work for more complex site layouts. Luckily, the iPhone X’s reported delays may buy web developers time before the sensor housing sees mass market adoption.
Check out 9to5Mac on YouTube for more Apple news:
FTC: We use income earning auto affiliate links. More.
Comments