The Apple iPhone X: What's New, What Remains The Same

by A Design Blogger

Apple's iPhone X was recently released to much fanfare. Among its many changes, the device now has a Sensor Housing - a notch on the top of the screen that is used for Face ID. This caused panic among some web designers, as the notch creates challenges, particularly when the phone is in landscape mode. But these challenges can be easily overcome.

In landscape mode, the iPhone X notch leaves unequal left and right margins. Apple solves this problem by letterboxing content with a white edge, but, by using a few new HTML and CSS elements, you can take full advantage of iPhone X's edge-to-edge display. These new elements include a viewport meta content property and some new padding property values.

How To Use the New HTML and CSS Elements

First, you need to change (or add) the viewport tag in the web page's head section, adding the property viewport-fit=cover to the content attribute.

For example:

Only Safari recognizes this new property, which tells the browser to not apply letterboxing. After doing this, you need to use the new padding values so that the notch doesn't cover important elements of your page. You build these values through 2 functions and 2 variables.

The env() function, which requires iOS 11.2, takes as input either the variable safe-area-inset-left or safe-area-inset-right, and it determines the proper padding values so that the notch won't cover your elements. For fallback purposes, you should use the function constant().

For example:

.container {

/* Fallback */

padding:0 10px;

/* iOS 11 */

padding-left: constant(safe-area-inset-left);

padding-right: constant(safe-area-inset-right);

/* iOS 11.2+ */

padding-left: env(safe-area-inset-left);

padding-right: env(safe-area-inset-right);

}

For more information about using these elements, go to the webkit.org blog and check out Designing Websites for iPhone X.

Also, on a Mac you can use Safari's Developer Tools to inspect these new elements.

While the iPhone X's notch may seem like a cataclysmic event for some web designers, in reality it is very simple to accommodate it.