Background

From Apple’s iphone Many apps are directly compatible with the style of the webview inside. When the screen is in portrait mode, the top is often a navigation bar, which does not cover the content in the webview. The bottom height is set from the app level so that the bottom of the webview is not within the black horizontal bar area, so that it does not hinder the display of the content in the webview.

However, each app is very different, and the webview inside will be displayed differently. If there is no bottom height of the app, then the bottom content in the webview will be blocked by a small black bar. In terms of web page style compatibility, it needs to be compatible with the unique "bangs" and the small black horizontal bar style at the bottom of iPhoneX without affecting the style of previous models.

Safe Area

First understand the safe area of iphoneX. The blue part in the picture below is the safe area. The margins on both sides, the notch at the top and the small black bar area at the bottom are all unsafe areas, and are areas where the content may be blocked. Then we need to control our content within the safe area.

Compatible solution

Fortunately, when iphoneX came out, the official ios11 system also provided WebKit Api to be compatible with this style difference.

Step one: Set the viewport-fit attribute

viewport-fit has three attribute values: auto, contain, and fit. The default is auto.
contain: The visual window completely contains the web page content, and the page content is displayed in the safe area
cover: The web page content completely covers the visual window, and the page content fills the screen
auto: default value, consistent with contain
By default, Safari displays the viewport-fit=contain situation, as shown below. In landscape mode, the page content in the webview is within the safe area. However, from a style perspective, this is not very beautiful and does not make good use of the full-screen feature given by iPhoneX.

To solve this problem, WebKit in ios11 includes a new CSS function env(), and four predefined environment variables safe-area-inset-left, safe-area-inset-right, safe-area-inset-top and safe-area-inset-bottom. These four environment variables represent the distance from the safe area.

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

ios11.2 used to use the constants() function, but later it was changed to the env() function in the ios11.2 version. In order to be compatible with both, you can write both.

Step 2: Set the safe area distance

.post {
    padding: 12px;
    padding-left: constants(safe-area-inset-left); // ios<11.2
    padding-left: env(safe-area-inset-left); // ios>=11.2
}

In this way, when it is not in the safe area, env(safe-area-inset-left) is not equal to 0, which will cause a safe distance to be set on padding-left so that the content is not blocked.

The above is the case where it is blocked by "bangs". In fact, in more cases, the small black bar at the bottom blocks the floating bar, plus attribute support judgment@supports , the css inside will only be executed when env(safe-area-inset-bottom) is supported by the browser. 

.bottom-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

Note: The webview in WeChat is in the default viewport-fit=cover state. You only need to set a safe distance. The above solution is also applicable to WeChat applet.