Default Behavior
Out of the box, the brand new iPhone in landscape orientation will be displaying the website content with safe areas on the sides. The space between site content and the edge of the screen will be filled with a background-color specified in the <html>or <body> HTML tags. That’s a good move from Apple because none of the websites will look broken. The content won’t be covered by the “notch.” The site won’t look as good as it would if it was fully embracing the gorgeous edge to edge display. For websites with a full-width header that would be a problem because the experience of the site would be different.
Furthermore, the iPhone X does not have a home button, Apple replaced it with a line that seats at the bottom of the screen. For websites with a secondary navigation stuck to the bottom of the screen that might be a problem. WebKit does not manage this issue by default. You will have to adjust your markup to be iPhone X compatible.
Designing Websites for iPhone X
Apple Developers have implemented few new features into the WebKit, which were made especially for the iPhone X. I will describe them below.
See also: Most Important Web Design Elements And Principles You Should Know
Viewport Extension
With iOS 11 release Apple introduced an extension to the already existing viewport meta tag. It’s called viewport-fit. Its default value is auto. This feature will give you the control over the insetting behavior. As you might guess when the viewport-fit value is set to auto, the website will inset automatically. To alter the default behavior, you can set it tocover. It will result in edge to edge display of your website.
Here is an example of how the meta tag would look like:
[k_blog_code]<meta name=’viewport’ content=’initial-scale=1, viewport-fit=cover’>[/k_blog_code]
As a result, your site appears at a full width of the screen. The sensors housing probably covers the content. Additionally, without proper padding, your content will be stacked along the edge of the screen. You can quickly see that it is essential to respect the safe area inset.
Safe Area Inset
While the page is set to full width, probably your website has its content stacked to the side of the screen. Of course, if you have a full-width header, it would be great if you could just add padding to it. That way, the background will display across the screen, but your content will be inside the safe area.
Therefore to resolve this Apple implemented new safe-area-inset, pre-defined set of 4 constants and a new CSS function called constant(). The safe area pre-defined constants are as follows: safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom and save-area-inset-left. When you combine all four of those constants, you can reference the current size of safe area inset on each side. The constant() works everywhere a var() does.
Here is an example:
[k_blog_code].post {
padding: 12px;
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
}[/k_blog_code]
Most of all, you must remember that not all browsers support constant() While not supported it is ignored by the browser. Make sure to prepare a fallback for those browsers.
In addition on the WebKit blog, you may also find information about two new functions min() and max(). Most browsers, including Safari does not support them (they will be in feature releases). If you want to learn more, please read this blog post.
Conclusion
Making a website iPhone X compatible seams easy enough for any developer/designer to implement. Apple has introduced some cool new features for developers, to make sure they will use fully the new gorgeous screen on iPhone X.
