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, 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, let’s take a look at the safe area of ​​the iPhone

Compatible solutions

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

Step 1: Set the viewport-fit attribute

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
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 provided by iPhoneX.

To solve this problem, WebKit in ios11 includes a new CSS function env(), as well as four predefined environment variablessafe-area-inset-left,safe-area-inset-right,safe-area-inset-topandsafe-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: distance from the safe area to the right boundary
  • safe-area-inset-top: distance from the safe area to the top boundary
  • safe-area-inset-bottom: distance from the safe area to the bottom boundary

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

Step 2: Set the safe zone 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, and the attributes support the judgment.@supports,onlyenv(safe-area-inset-bottom)The css inside will only be executed when it 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 defaults to viewport-fit=cover. You only need to set a safe distance. The above solution is also applicable to WeChat applet.