The key to IphoneX adaptation is how to adapt the page to the notches, bottom operating area, and large rounded corners.
Compared with other mobile phones, the difference between IphoneX is that although the device also has one screen, it is actually divided into several modules. See the figure below for details:
When we move a normal web page to X, the effect is that the content is only displayed in the Safe Area, and there is no web content in the non-safe area. That means white blocks will appear at the head and bottom. How to deal with it?
Solution 1. Add a background-color to the bodyWhy add background-color? What's the use? Notice that there will be white patches on the head and bottom we just mentioned. In fact, it is not accurate to say that it is white, because this color actually comes from the background color of the body. In addition, when we pull up or pull down the content, the content and color at the bottom of the web page will be displayed, which is actually 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 = coverThis step is extremely critical. Let’s take a look at the results first:
Copy code