It’s that simple to adapt web pages to iPhoneX

iPhoneX has removed the physical buttons and replaced them with a small black bar at the bottom. This change has caused awkward screen adaptation issues for web pages. For web pages, the browser has already dealt with the adaptation issues of the top (bangs), so we only need to focus on the adaptation issues of the bottom and the small black bar (i.e. the common bottom-sucking navigation, return to top and other elements with fixed positioning relative to the bottom).

The author has consulted some official documents and combined some processing experience in actual projects to organize a simple adaptation solution to share with you. I hope it will be helpful to you. The following are the effect pictures before and after processing:

Several new things you need to know before adaptation

Safe Area

The safe area refers to a visible window range. The content in the safe area is not affected by rounded corners (corners), bangs (sensor housing), and small black bars (Home Indicator), as shown in the blue area in the following figure:

In other words, if we want to adapt well, we must ensure that the visible and operable areas of the page are within the safe area.

For more detailed instructions, refer to the document: Human Interface Guidelines - iPhoneX

viewport-fit

A new feature of iOS 11. In order to adapt to iPhone X, Apple has extended the existing viewport meta tag to set the layout of the web page in the visible window. Three values ​​can be set:

• contain: The visible window completely contains the web page content (left image)
• cover: The web page content completely covers the visible window (right image)
• auto: The default value, which is consistent with contain

Note: The default behavior of a web page without adding extensions is viewport-fit=contain. To adapt to iPhoneX, you must set viewport-fit=cover. This is a key step in adaptation.

For more detailed explanation, refer to the document: viewport-fit-descriptor

constant function

A new feature of iOS 11, a CSS function of Webkit, is used to set the distance between the safe area and the border. There are four predefined variables:

• safe-area-inset-left: The distance between the safe area and the left border
• safe-area-inset-right: The distance between the safe area and the right border
• safe-area-inset-top: The distance between the safe area and the top border
• safe-area-inset-bottom: The distance between the safe area and the bottom border

Here we only need to pay attention to the safe-area-inset-bottom variable, because it corresponds to the height of the small black bar (the value is different for horizontal and vertical screens).

Note: When viewport-fit=contain, the constant function does not work and must be used with viewport-fit=cover. For browsers that do not support constant, the browser will ignore it.

The official documentation mentions that the env function will soon replace the constant function, but I have tested it and it is not available yet.

For more detailed instructions, refer to the document: Designing Websites for iPhone X

How to adapt

After understanding the above-mentioned knowledge points, our next adaptation idea will be very clear.

Step 1: Set the layout of the web page in the visible window

Add the viweport-fit property to make the page content completely cover the entire window:

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

As mentioned before, the constant function can only be used if viewport-fit=cover is set.

Step 2: Limit the main content of the page to the safe area

This step is selected according to the actual page scenario. If this value is not set, there may be a situation where a small black bar blocks the upper part of the page content.

 body {
  padding-bottom: constant(safe-area-inset-bottom);
 }

Step 3: Adaptation of fixed elements

Type 1: fixed completely absorbs the bottom element (bottom = 0), such as the two cases in the following figure:

You can extend the height by adding padding:

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

Or use the calculation function calc to cover the original height:

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

Note that this solution requires that the bottom strip must have a background color, because the background of the extended part follows the outer container, otherwise hollowing will occur.

Another solution is to add a new element (an empty color block, mainly used to occupy the height of the small black bar), and then the bottom element can be adjusted without changing its height, just need to adjust its position, like this:

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

Empty color block:

 {
 position: fixed;
 bottom: 0;
 width: 100%;
  height: constant(safe-area-inset-bottom);
 background-color: #fff;
 }

Type 2: fixed non-complete bottom absorption elements (bottom ≠ 0), such as "Back to Top", "Side Ads", etc.

In this case, only the position needs to be adjusted upwards, which can be handled only by the margin:

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

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

 {
 bottom: calc(50px(assumed value) + constant(safe-area-inset-bottom));
 }

Don’t forget to use @supports

At this point, we have learned about the two common types of fixed element adaptation solutions, but don’t forget that we usually only need to add new adaptation styles for iPhoneX. We can write styles with @supports like this:

 @supports (bottom: constant(safe-area-inset-bottom)) {
 div {
    margin-bottom: constant(safe-area-inset-bottom);
 }
 }