Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how Html5 adapts to various mobile phone models". The editor shows you the operation process through actual cases, and the operation method is simple, fast and practical. I hope this article "how to adapt Html5 to various mobile phone models" can help you solve the problem.

The Iphonex model has added these two areas at the head and bottom, so we need to adapt to this type of model to facilitate the display of our webapp.

The common layout of the mobile page made of H6 is head + torso + bottom three-column mode. The head and top are fixed, and the contents of the torso can be scrolled. The tentative layout is as follows:

However, if you do not use the new css attribute of the IphoneX model, but directly use position: fixed In conventional writing methods such as top:0, the navigation bar in the head will be obscured by the status bar of the phone (showing the power signal, etc.), and the navigation bar at the bottom of the IphoneX will be obscured by the breathing light (the white bar at the bottom of the phone in the picture), which brings trouble to the user's operation and experience. at present, in view of this kind of problem, according to the project I have done, I have sorted out several solutions.

I'm using the vue framework, and on the index.html page, we need to add:

Then, on the public app.vue page, the display of each of our components is replaced by router-view here, so we can deal with the common header top bar here, as follows:

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

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

In this way, our subsequent individual components will no longer have to deal with the problem of the top column. Below, we can deal with the head problem mentioned earlier. Generally, most of the headers are encapsulated into public components, so here, due to the influence of the element we inserted in the app.vue page, the css writing of our headers also needs to be slightly changed. The page layout of the header components is as follows:

Navigation content

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: 10remt;}}

In this way, the head navigation bar will be placed under the phone's status bar, will not affect Windows, and will be compatible with Android and ios models (this type of compatibility issue also involves ios's system issues, but not covered in this article).

Next, let's take a look at the processing of the main area. Because the above header components have 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: explain here that the following two lines are used when there is no bottom navigation bar on the current page:

Padding-bottom: constant (safe-area-inset-bottom); padding-bottom: env (safe-area-inset-bottom);}

Once the layout of the main is ready, just write the content directly.

Then take a look at the footer layout at the bottom:

Bottom content

The css of the bottom content is as follows:

Footer {position: fixed; bottom: 0; left: 0; width: 10remt; 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: 10remt; height: 88px;}}

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

So to sum up, the css that we may need to use in this 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: 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 time being.

Different writing methods can be used here according to the actual needs, and the general layout logic is recommended not to deviate too much. This is written for unified processing and convenient maintenance. In addition, if there is a real machine test and find that the layout is compatible with the style problems, you can use the real machine debugging method to debug the webapp with a PC browser and review the elements, which can basically solve most of the style problems.

This is the end of the introduction to "how Html5 adapts to various mobile phone models". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.