H5 mobile ADAPTS IphoneX and other models

 <div class="page">
    <header></header>
    <main></main>
    <footer></footer>
  </div>Copy the code

But if you don’t use the new CSS properties of the IphoneX model, you use position: fixed; Top: 0 such as regular writing, can appear the head of the navigation bar above the status bar (display power signal, etc.) block, at the bottom of the navigation bar is IphoneX own breathing lamp (phone white) at the bottom of the shade, brings to the user experience of operation and, for this kind of problem, according to their own projects, I’m using the Vue framework. In the index.html page, we need to add

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

Then, in the public app.vue page, our display of each component is replaced by router-view here, so we can deal with the public header bar here, the specific layout is as follows:

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

@metag_top @metag_top @metag_top @metag_top @metag_top @metag_top @metag_top @metag_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;
}Copy the code

So, we later, individual components, don’t have to deal with the issue of the top bar, that here, we can deal with the mentioned above the head, head commonly, most of us would be encapsulated into public components, so in this case, because we are in the app. Vue page insert the element, the influence of our CSS notation of the head, The layout of the header component page is as follows:

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

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: 88 px; z-index: 999; } .placeholder{ height: 88px; width: 10rem; }}Copy the code

This way, the header navigation bar will be placed under the status bar of the phone. It won’t affect Windows, and it will work with both Android and ios devices. So main goes like this:

 main {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(88px + constant(safe-area-inset-bottom));
    padding-bottom: calc(88px + env(safe-area-inset-bottom));

    psThe padding-bottom lines are used when there is no navigation bar at the bottom of the page:constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom); },Copy the code

Once the layout is complete inside main, just write the content directly, and then look at the footer layout at the bottom

<template>
<footer>
    <div class="foot" :style="{position:fixposition? 'absolute':'fixed'}">At the bottom of the content</div>
</footer>
</template>Copy the code

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; }}Copy the code

In this way, the bottom navigation in the foot, not blocked by the phone’s own breathing light

So we can sum up, we in this webApp adaptation, may need to use CSS writing 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));Copy the code

ps:Style = "style="{position:fixposition? 'absolute':'fixed'}"This is to solve the problem of inaccurate positioning of such fixed elements when the user clicks the input box and the soft keyboard pops up. If you are interested, you can study it and this paper will not discuss it temporarilyCopy the code

It is recommended not to deviate too much from the general layout logic. It is written in this way for unified processing and convenient maintenance. In addition, if there is a real machine test and the style problem caused by layout compatibility is found, the real machine debugging method can be used to debug WebApp and review elements with a PC browser. That basically can solve most of the style problems, about the real machine debugging, write backCopy the code