Designing for the iPhone X — Part 2: Safari and CSS functions
In Part 1 of our Designing for the iPhone X series, we explored the phone’s new dimensions, layout, and how to export assets.
In Part 2, we’ll discuss ways to assure your existing content looks great on the new device. We’ll also explore new features in Safari for iPhone X to take advantage of that big, beautiful screen.
Safari on iPhone X: The first encounter
Out of the box, Safari should handle your site without issue. By default, Safari makes sure that the rounded corners and sensor housing (a.k.a. The Notch™) won’t obscure your content.
As another measure, if your background is set to a solid color on your body or html element, Safari will account for that and fill in any gaps along the way. In all honestly, this will likely be good enough for most folks. But for those of you that want a full-screen experience, there’s a new way to handle that.
Beautiful edge-to-edge content
For most sites, Safari’s default display options will be enough. But for those of you who want to take advantage of the entire screen (yes, Notch™ and all), meet viewport-fit.
viewport-fit is a new meta tag that overrides the default settings and pushes your content edge-to-edge. viewport-fit is set to auto, but setting the tag to cover will spread your content to all corners of the iPhone’s screen in landscape orientation. The full tag looks like this:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>But take heed — using this technique by itself is not practical and will almost certainly lead to a bad user experience.
Mind the Safe Areas
With Safari on iPhone X, Apple introduces what it calls Safe Areas. If you’re using viewport-fit: cover, you’ll want to take advantage of some new code to help inset select content.
WebKit in iOS 11 now includes a new CSS function called env(). env() comes standard with four environmental variables that keep your content from butting up against the edges.
For example, you can set specific code for Safari that accounts for padding and the safe areas:
.container {
padding: 20rem;
padding-left: env(safe-area-inset-left);
padding-left: env(safe-area-inset-right);
padding-left: env(safe-area-inset-top);
padding-left: env(safe-area-inset-bottom);
}And don’t worry — for browsers that don’t support env(), the style is ignored and your fallback is respected.
Accounting for portrait orientation
These new inset tags and functions are all well and good, but things start to fall apart when we move back to portrait from landscape. In fact, when back in portrait orientation, you’ll notice that the .containercontent is flush with the sides of the display. Not good.
To remedy this, we’ll take advantage of brand-new min() and max() CSS functions. For this use case, we want to use max(). Here’s some sample code from webkit.org to show how it’s written:
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}Since our env(safe-area-inset-left) becomes 0rem when the phone is in portrait orientation, the max() function accounts for that and resolves to 20rem — pushing the content back inside the Safe Area.
Want to see it in action? Go ahead and fire up the iPhone X Simulator in Xcode 9.1 and get your hands dirty. Take some time to experiment with the new layout tags and functions until you get the hang of them — then push them to your own sites for the world to see. Good luck!
Note: A lot of this information comes from the good folks at webkit.org. For more in-depth information and examples, check out their article.
— Written by @mattdowney
If you’re a Designer or Developer creating experiences on the iPhone, then you’ll love our newsletter. 🙌
Each week we’ll send you the best digital design and development resources, as well as behind-the-scenes 45royale content delivered straight to your inbox. Sign up today!
