Let's see what the iPhone X looks like first

In the image above, the Iphonex model has two new areas on the head and bottom, so we need to make some adjustments to this type of model to make our webapp display easier.
h5 mobile end page, the common layout is head + trunk + bottom three columns mode, the head and top are fixed positioning, the contents inside the trunk can scroll, tentative layout is as follows:

 <div class="page">
    <header></header>
    <main></main>
    <footer></footer>
  </div>

However, if you do not use the new css attributes of the IphoneX model, but use the regular writing methods such as position: fixed;top:0, etc., the navigation bar of the head will be blocked by the status bar (showing the power signal, etc.) of the mobile phone itself, and the navigation bar at the bottom will be blocked by the breathing lamp (white strip at the bottom of the mobile phone in the picture), which will confuse the user's operation and experience.For this kind of problem, I have sorted out several solutions according to my own projects.
I'm using the vue framework, and on the index.html page, we need to add

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

Then, on the public app.vue page, the display of each of our components is replaced here by router-view, so you can deal with the public headbar here, with the following layout:

<template>
<div id="app">
<div class="placeholder_top" :style="{position:fixpositiona?'absolute':'fixed'}"></div>
<router-view  class="routerview"></router-view>
</div>
</template>

In the above layout, we write the following for div with class placeholder_top:

.placeholder_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 10rem;
  background-color: #303030;
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
  z-index: 999;
}

That way, we won't have to deal with this top bar problem later, separate components. Now, we can deal with the header problem mentioned earlier. Normally, headers, most of us are encapsulated as public components, so here, because of the element we inserted in the app.vue page, the css writing of our headers needs to be slightly changed.Next, the header component page layout is as follows:

<template>
<header>
    <div class="title" :style="{position:fixposition?'absolute':'fixed'}">
    //Navigation Content
    </div>
    <div class="placeholder"></div>
    </header>
</template>

The css of the page is:

header{
background-color: #303030;
    .title{
    position: fixed;
    top:0;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    left: 0;
    height: 88px;
    z-index: 999;
    }
    .placeholder{
    height: 88px;
    width: 10rem;
    }
}

In this way, the header navigation bar will be placed under the status bar of the mobile phone, will not affect the window, and will be compatible with Android and IOS models (compatibility issues, including system issues with ios, are not covered in this article yet)
Next, let's look at the processing of the main area, because the header component above has already been processed, so the main is laid out directly as follows:

 main {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }，

The main is laid out so that you can write directly.
Then look at the footer layout at the bottom

<template>
<footer>
    <div class="foot" :style="{position:fixposition?'absolute':'fixed'}">
    //Bottom Content
    </div>
</footer>
</template>

The css at the bottom is as follows:

footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 10rem;
    height: calc(88px + constant(safe-area-inset-bottom));
    height: calc(88px + env(safe-area-inset-bottom));
    background-color: #303030;
    .foot{
    position: absolute;
    top:0;
    left: 0;
    width: 10rem;
    height: 88px;
    }
}

In this way, the contents of the bottom navigation foot will not be obscured by the breathing lights that come with the phone

So to summarize, we're here webapp In an adapter, what may be required is css Write as follows:
    position: fixed;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    top: calc(1rem + constant(safe-area-inset-top));
    top: calc(1rem + env(safe-area-inset-top));
    bottom: calc(1rem + constant(safe-area-inset-bottom));
    bottom: calc(1rem + env(safe-area-inset-bottom));

ps:In the above writing, there are: style="{position:fixposition?'absolute':'fixed'}". This is to solve the problem of inaccurate positioning of such fixed elements when the user clicks on the input box and pops up the soft keyboard. If you are interested, you can study it. This article will not discuss it for the moment.

Here you can use different writing methods according to your actual needs. The general layout logic suggests not to deviate too much. This is written for uniform processing and easy maintenance. In addition, if you have real machine testing and find style problems caused by layout compatibility, you can use real machine debugging method, debug webapp with pc-side browser, review elements, which can basically solve most style problems.About real machine debugging, write back