Brief Introduction to Html5 IphoneX adaptation method, html5iphonex

Brief Introduction to Html5 IphoneX adaptation method, html5iphonex

The key to the adaptation of iPhone X is how to adapt the page to the "Qi liuhai", the bottom operation area, and the large rounded corner.

The difference between iPhone X and other mobile phones is that although the device is also a screen, it is actually divided into several modules. For details, see:

When we move a normal webpage to X, the result is that the content is only displayed in the Safe Area, and there is no network content in the non-security Area. That is to say, there will be white blocks at the header and bottom. How can this problem be solved?

Solution

1. Add a background-color to the body.

Why add background-color? What is the purpose? We noticed that the white block will appear at the header and bottom. In fact, white is not accurate because the color actually comes from the background color of the body. In addition, the content and color at the bottom of the webpage are displayed when we pull the content up or down, which is also the background color of the body. So if you want to modify these two effects, you can set the background color of the body.

2. Add the <meta> tag of viewport-fit = cover.

This step is critical. First look at the results:

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 it critical? The main problem with iphoneX is that webpage content cannot be displayed in other places except the security zone, which is tailored to solve this problem. After the preceding content is set, the content in the header and bottom can be displayed on the webpage.
However, you will find that the region is open, but the content (usually in the navigation bar) is blocked due to "Qi liuhai, I found that the originally set 100% height does not occupy all the height space. What should I do?

The height of the header and the bottom are actually matched values, such:

Therefore, we have the following solutions:

1. Modify the height of our navigation bar to add the safe-area-inset-top height, that is, 44px to the original height. You can write it as follows:
Height: calc (navHeight + 44px); and reset the text position on the navigation bar.

2. the chrome kernel of the IOS 11 browser provides the following content, that is, the values we mark:

1. Safe-area-inset-top
2. Safe-area-inset-right
3. Safe-area-inset-left
4. Safe-area-inset-bottom

How to use it? Simple:

Body {padding-top: constant (safe-area-inset-top); // It is the height of the navigation bar + status bar 88px padding-left: constant (safe-area-inset-left); // If the screen is not portrait, the value is 0 padding-right: constant (safe-area-inset-right ); // If the screen is not portrait, 0 padding-bottom: constant (safe-area-inset-bottom); // The height of the bottom arc is 34px}

Maybe you have never seen the constant thing, and I have never seen it before. It is also designed for iphoneX, note that this value takes effect only when viewport-fit = cover is added to your <meta> tag. Of course, android phones won't be recognized.

3. valid only for IphoneX

Note that the adaptation is only effective for IphoneX and does not affect other mobile phones. Therefore, we need to make a responsive layout, that is, use media query, as shown below:

// Note that 690px (safe area height) is used here, not 812px; @ media only screen and (width: 375px) and (height: 690px) {body {height: 100vl ;}}

Some materials said that the above use is OK, but I did not use it, so I relaxed some conditions and made the following changes:

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

The difference is that I recognize devices with a width of 375px and a height greater than 690px as the iPhone X. Of course, currently, only the device X meets this condition.

4. webpage height changes

I would like to emphasize that this part is not quite certain. I met it myself and proposed to explain it:

After viewport-fit is set, you will find that the originally set height of 100% is not as expected and only occupies part of the screen space. In fact, it is not urgent. You only need to make the following changes:

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

The following is an absolute unit used to check the viewport, that is, the height of the viewport. Setting Gbit/s means that the full screen height is occupied.

5. ceiling of the navigation bar and ceiling of the taskbar

The page content can be pulled. If the navigation bar also slides, the effect will be ugly. This requires us to achieve the top-sucking effect of the navigation bar. We will not talk much about implementation. Here is a case of mine:

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

The same applies to the taskbar. Bytes

Background

This article briefly describes how to deal with the adaptation of iPhone X. If you want to learn more about the principles, please visit the comments area.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.