Scenario: Navigation bar at the bottom of the H5 page

.footer-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
}
Copy the code

Symptom: The bottom navigation bar on the iPhone 12 is significantly higher than 60px.

Reason: iOS models starting from iPhone X have a horizontal bar at the bottom, H5 pages can still be displayed in the horizontal bar area, indicating that the horizontal bar area is within the scope of the page window, but position: fixed; Bottom: 0; It is above the bar area and does not cover the bar area, which results in position: fixed; Bottom: 0; Not really at the bottom of the page, but some distance above the bottom of the page, about 35px, the height of the horizontal bar area.

Solutions:

<meta name="viewport" content="... viewport-fit=cover">
Copy the code

To tell the browser to use all available space on the screen and use the env() variable accordingly, we need to add a new viewport element value.

.footer-navbar{...padding-bottom: env(safe-area-inset-bottom);
}
Copy the code

Safe-area-inset -* consists of four environment variables that define the top, right, bottom, and left rectangles inside the viewport edge so that content can be safely placed without the risk of being cut off by a non-rectangular display. For a rectangular viewport, such as a regular laptop monitor, the value is zero. For non-rectangular displays (such as round dials, iPhoneX screens), everything is visible within the rectangle formed by the four values set by the user agent.

Reference:

How to Fix Bottom Padding for iOS Mobile Browsers

env()