Adapter iphone X

We first need to metatag a viewport-fit=coverdefault viewport-fit=contain, with background-sizesimilar.
When the value is set to covereither make a safe area covered with full-screen, just like other devices fit no difference.
But the content will be the top and bottom hardware block, you do not want to be blocked, you need to reserve a certain height of the bottom of the head.
So we need padding, four official value, can get directly to the bottom of the head and a left to the right when the value of the landscape, we only need to set on the four values can be in their own container for the body plus:
constant-top: (safe-area-inset-top)
padding-left: constant(safe-area-inset-left)
padding-right: constant(safe-area-inset-right)
padding-bottom: constant(safe-area-inset-bottom)

• It should be noted that the viewport-fitvalue is not coverset constant()is invalid
• When the right vertical screen is left 0, right left horizontal screen only when the value of

code

meta

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">

css

.container {
  overflow: scroll;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
}