IPhone X web design

Default embedding behavior in Safari.

Use the entire screen

The first new feature is an extension of the existing ViewPort meta tag, called ViewPort-Fit, which provides control over the embedded behavior. Viewport-fit is available in iOS 11.

The default value of viewport-fit is auto, which causes the effect of automatic embedding. To disable this behavior and make the page full screen, you can set viewport-fit:cover to cover. After doing so, our ViewPort meta tag looks like this:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>Copy the code

After reloading, the navigation bar appears edge-to-edge and looks much better. However, it’s clear why it’s important to pay attention to the embedding of the system’s security zones: the content of some pages is obscured by the space of the original deep camera system, and the navigation bar at the bottom is very difficult to use.

Use viewport-fit=cover to fit the full screen.

Pay attention to safe areas

In order for the page to be usable after viewport-fit=cover, the next step is to selectively apply padding to elements that contain important content to ensure that the elements are not obscured by the shape of the screen. The resulting page will take advantage of the added screen real estate on the iPhone X, while dynamically adjusting to avoid the four corners of the original deep camera system near the home screen.

Safe and unsafe for iPhone X landscape (with default embedded values)

To achieve this, WebKit in iOS 11 adds a new CSS function, constant(), and a set of four predefined constants: Safe-area-inset-left, safe-area-inset-right, safe-area-inset-top and safe-area-inset-bottom. When combined, styles are allowed to use the size of the security zone in each direction.

Keep in mind that the CSS working group recently decided to add this feature, but under a different name.

The constant() function is similar to var(), as in the following example, using the padding property:

.post {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}Copy the code

For browsers that do not support constant(), styles that include constant() are ignored. Therefore, it is important to use alternative styles in addition to styles that use constant().

Pay attention to the embedding of the security zone, so that important content is visible.

Combine it all together using min() and Max ()

This section describes the features not implemented in iOS 11.

If you use constant() to set the security zone in your website design, you may notice that it is difficult to specify the minimum padding when setting the security zone. In the page above, we replaced the 12 px left padding with constant(safe-area-inset-left), and when we went back to portrait, the left safe area became 0 px, and the text immediately sat close to the edge of the screen.

Security zone embedding is not a substitute for margins.

To solve this problem, we need to specify that the padding should be either the default padding or the larger one in the security zone. This can be done with the new CSS functions min() and Max (), which will be supported in a future Safari preview release. Both functions take an arbitrary number of arguments and return a minimum or maximum value. They can be used in calc(), or nested together, and both of these functions allow mathematical computations like calc().

For example, in an example like this, Max () can be used like this:

@supports(padding: max(0px)) { .post { padding-left: max(12px, constant(safe-area-inset-left)); padding-right: max(12px, constant(safe-area-inset-right)); }}Copy the code

It is important to use @supports to detect min and Max because it is not supported by any browser. Do not specify variables in @supports queries according to CSS invalid variable handling.

In the example page, constant(safe-area-inset-left) resolves to 0 px in portrait, so Max () resolves to 12 px. Setting constant(safe-area-inset-left) becomes larger in landscape mode due to sensor space, and the Max () function parses this size to ensure that important content is always visible.

Max () combines safe zone inlays with traditional margins

Experienced Web developers have probably encountered CSS locking mechanisms before, typically used to set CSS properties in a specific range of values. Using min() and Max () together makes things easier and will help achieve effective responsive design in the future.

Feedback and questions