HTML5 's Iphonex adaptation method sharing

Iphonex adaptation, the key is how to adapt the page to "Liu Qi", the bottom of the operation area and the big corner problem. Iphonex compared to other mobile phones, the difference is that although the device is also a screen, but in fact, is divided into several modules, this article mainly and we introduced the HTML5 Iphonex adaptation method of relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Our normal page, moved to X, the effect is that the content is only displayed in safe area security zone, the non-security area part of the network content, that is, the head and the bottom of the white block, how to deal with it?

Solutions

1. Add a background-color to the body

Why do you add background-color? What's the use? Notice that we just said that the head and the bottom will appear white, in fact, it is not accurate white, because this color is actually from the body of the background color. In addition, when we pull up or pull down the content will show the content and color below the page, in fact, the body background color. So if you want to change these two effects, you can set the background color of the body.

2. Add viewport-fit = Cover <meta> tags

This step is extremely critical. Let's look at the results:

Copy Code

The code is as follows:

<meta name= "viewport" content= "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, width= Device-width, Viewport-fit=cover "/>

Why is that critical? The main problem with Iphonex is that in addition to the security zone, Web content cannot be displayed elsewhere, and it is tailored to solve the problem. When the above content is set, the head and bottom can be opened to the page display content.
But then you will find that the area is open, but the content (often the navigation bar) is obscured by "Liu Qi", and found that the original set of 100% height does not occupy the full height of space, how to do?

For the height of the head and the height of the bottom, there are actually matching values, such as:

Therefore, we have the following solutions to deal with:

1. Modify the height of our navigation bar, for the original height plus safe-area-inset-top height, that is, 44px;
Height:calc (Navheight + 44px), and reset the location of the copy on the navigation bar.

2. The IOS 11 Browser Chromium kernel provides the following, which are the values we have labeled:

1. Safe-area-inset-top

2. Safe-area-inset-right

3. Safe-area-inset-left

4. Safe-area-inset-bottom

How to use it? Very simple:

Body {    padding-top:constant (safe-area-inset-top);   Height 88px                padding-left:constant (safe-area-inset-left) for navigation bar + status bar;   0 padding-right:constant (safe-area-inset-right) If it is not,                    or 0 padding-bottom:constant if no vertical screen                    ( Safe-area-inset-bottom);//For the height of the bottom arc 34px       }

Perhaps you have not seen constant this thing, I have not seen before, it is also designed for Iphonex value, note that only if your <meta> tag has been added Viewport-fit=cover, the value will take effect. Of course, on Android phones, it will not be recognized.

3. Only valid for Iphonex

Note that the adaptation we do is only for Iphonex, and does not affect other phones, so we want to do a responsive layout, that is, using media queries, as follows:

Note that the 690px (safe area height) is used here, not 812px, @media only screen and (width:375px) and (height:690px) {    body {        height:10 0VH;    }}

There is data said that the above use is OK, but I use but not what effect, so I relaxed the point of conditions, made the following changes:

@media only screen and (width:375px) and (min-height:690px) {    body {       height:100vh;    }}

The difference is that I'm identifying a device with a width of 375px and a height greater than 690px is Iphonex. Of course, only X is currently eligible for this device.

4. Web page height changes

First of all, this part is not very sure, I met myself, put forward to illustrate:

Set the Viewport-fit, you will find that the original set of 100% height does not meet the expectations, only occupy a portion of the screen space, in fact, not urgent, only need to make the following changes:

@media only screen and (width:375px) and (min-height:690px) {    body {        height:100vh;    }}

VH is an absolute unit that checks the height of the viewport that is the viewport, 1VH = 1% viewport height. Setting 100VH means full screen height

5. Navigation bar suction top, taskbar suction Bottom

Page content can be pulled, if the navigation bar also with sliding, the effect is very ugly, which requires us to achieve the navigation bar ceiling effect. Implementation everyone will not say more, here to show me a case:

@media only screen and (width:375px) and (min-height:690px) {  p {    position:fixed;    Display:block;    z-index:300;  }  . BG {    Height:calc (3.5rem + 44px);  }  p {    margin-top:44px;  }}

The taskbar is the same.

Post-language

This article is just a simple description of how to deal with the Iphonex adaptation of the specific steps, if you want to further understand the principle, welcome to the comment area to exchange.