Let’s take a look at what the iPhone X model looks like first
In the picture above, the Iphonex model has these two new areas on the head and bottom, so we need to make some adaptations for this type of model to facilitate the display of our webapp.
For mobile pages made of h5, the common layout is head + torso + bottom three-column mode. The head and top are fixedly positioned, and the content in the torso can be scrolled. The 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 Iphone In this situation, the navigation bar at the bottom is blocked by the breathing light that comes with Iphone Checked out several solutions
I am using the vue framework. In 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 by router-view here, so the public header bar can be processed 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>In the above layout, we write the following for the 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;}In this case, we will no longer have to deal with the top bar issue for separate components in the future. Next, we can deal with the header issue mentioned earlier. Generally, most of the headers will be encapsulated into public components, so in Here, because of the influence of the element we inserted on the app.vue page, the CSS writing method of our head also needs to be slightly modified. The page layout of the head component 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; }}Written like this, the head navigation bar will be located under the status bar of the mobile phone, will not affect the window, and is compatible with Android and iOS models (such compatibility issues also involve system issues with iOS, but this article Not yet involved)
Now let’s look at the processing of the main area. Because the header component above has been processed, the main layout is as follows:
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));ps: Let me explain here. The following two lines are used when the current page does not have a bottom navigation bar.
padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);},
The main layout is ready, just write the content 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 of the bottom content 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; }}Written this way, the content in the bottom navigation foot will not be blocked by the breathing light that comes with the phone.
So we can summarize that the css writing method we may need to use in this kind of webapp adaptation is 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, it is written: 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 the soft keyboard pops up. If you are interested, you can study it. This article will not discuss it for now.
Different writing methods can be used here according to actual needs. It is recommended not to deviate too much from the general layout logic. It is written this way for unified processing and convenient maintenance. In addition, if there is real machine testing and style problems caused by layout compatibility are found, real machine debugging can be used The method is to use the PC browser to debug the webapp and review the elements. This can basically solve most of the style problems. I will write about real machine debugging next time.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.