A safe zone?

The safe area refers to a visual window range. Contents in the safe area are not affected by corners, fringe sensor housing and Home Indicator, as shown in the blue area below:

In other words, we have to make sure that the visible and actionable areas of the page are within the safe zone for good adaptation. For more details, refer to Human Interface Guidelines-iphoneX

viewport-fit

IOS11 new features, apple in order to adapt iPhoneX to an extension of the existing viewport meta tag, used to set the layout of the web page in the visual window, can set three values:

  • Contain: a visual window that contains everything on the web
  • Cover: The content of the web page completely covers the visible window (right)
  • Auto: indicates the default value, which is the same as the contain

Note: viewport-fit=cover is the only way to contain an iPhoneX folder.

For more details, see the documentation: viewport-fit-Descriptor

Env () and constant ()

New in iOS11, Webkit is a CSS function for setting the distance between a security zone and a boundary. There are four predefined variables:

  • Safe-area-inset-left: indicates the distance between the security zone and the left boundary

  • Safe-area-inset-right: indicates the distance between the security zone and the right boundary

  • Safe-area-inset-top: indicates the distance between the security zone and the top boundary

  • Safe-area-inset-bottom: indicates the distance between the security zone and the bottom boundary

Here we only need to focus on the safe-area-inset-bottom variable because it corresponds to the height of the little black bar.

Note: Env () does not contain any information if it contains viewport-fit=cover. Browsers that do not support env() will ignore it.

Backward compatibility is needed, like this:


padding-bottom: constant( safe-area-inset-bottom); /* Compatible with iOS < 11.2 */

padding-bottom: env( safe-area-inset-bottom); /* Compatible with iOS >= 11.2 */

Copy the code

Note that env() and constant() need to be in the same order.

For more information, please refer to this document: Designing Websites for iPhone X

How to fit

Understand the above said a few knowledge points, next we adapt the idea is very clear.

Step 1: Set up the layout of the web page in the visual window

Added the viweport-fit attribute to make the page content completely cover the whole window:


<meta name="viewport" content="width=device-width, viewport-fit=cover">

Copy the code

As mentioned earlier, env() can only be used if viewport-fit=cover is set.

Step 2: Confine the page body content to a security zone

Select this step based on the actual page scenario. If you do not set this value, a small black bar may block the content at the bottom of the page.


body {

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

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

}

Copy the code

Step 3: fixed element adaptation

Type 1: Fixed completely absorbs the bottom element (bottom = 0), as shown in the following two cases:

You can extend the height by adding an inner margin:


{

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

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

}

Copy the code

Or override the original height by calculating the function calc:


{

height: calc(60px(Assumed value) +constant(safe-area-inset-bottom));

height: calc(60px(Assumed value) +env(safe-area-inset-bottom));

}

Copy the code

Note that this scheme requires the bottom strip to have a background color, because part of the background of the expansion is to follow the outer container, otherwise there will be hollow out.

else

Type a

Alternatively, you can add a new element (an empty color block, mainly for the height of the small black bar), and then the bottom element can be adjusted without changing its height, like this:


{

margin-bottom: constant(safe-area-inset-bottom);

margin-bottom: env(safe-area-inset-bottom);

}

Copy the code

Empty color block:


{

position: fixed;

bottom: 0;

width: 100%;

height: constant(safe-area-inset-bottom);

height: env(safe-area-inset-bottom);

background-color: #fff;

}

Copy the code
Type 2

Fixed elements with incomplete bottom absorption (bottom ≠ 0), such as “return to the top”, “side ads”, etc., only need to be adjusted upwards, which can be handled only by margin:


{

margin-bottom: constant(safe-area-inset-bottom);

margin-bottom: env(safe-area-inset-bottom);

}

Copy the code

Alternatively, you can override the original bottom value by calculating the function calc:


{

bottom: calc(50px(Assumed value) +constant(safe-area-inset-bottom));

bottom: calc(50px(Assumed value) +env(safe-area-inset-bottom));

}

Copy the code
@supports isolates compatible styles

Here we have two common types of fixed element adaptation. If we only want to add adaptive styles for iPhoneX, we can isolate compatible styles with @supports, which has no real impact on the display of the page:


@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {

div {

margin-bottom: constant(safe-area-inset-bottom);

margin-bottom: env(safe-area-inset-bottom); }}Copy the code