The adaptation method of html5 simple iphoneX bangs screen

This article mainly introduces the relevant knowledge of "html5 simple iphoneX Liu Haiping adaptation method". Xiao Bian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "html5 simple iphoneX Liu Haiping adaptation method" can help you solve the problem.

How to adapt?

The first step is to set the layout of the page in the visible window.

iOS11 new features, Apple in order to adapt to the iPhone X to the existing viewport meta tag of an extension, used to set the layout of web pages in the visual window, you can set three values:

contain: The visual window contains the entire content of the web page

cover: Web page content completely covers the visible window

auto: default value, consistent with contain

Note: The default performance of the webpage without adding extensions is viewport-fit=contain, which needs to be adapted to iPhoneX. Viewport-fit=cover must be set, which is the key step of adaptation.

The second step is to limit the main content of the page to a safe area.post { padding: 12px; padding-left: env(safe-area-inset-left); padding-left: const(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-right: const(safe-area-inset-right);}

constant function

New in iOS11, a CSS function in Webkit that sets the distance between the safe zone and the boundary, with four predefined variables:

safe-area-inset-left: distance from safe area to left boundary

safe-area-inset-right: distance between safe area and right boundary

safe-area-inset-top: distance between safe area and top boundary

safe-area-inset-bottom: distance between safe area and bottom boundary

Note: Some browsers no longer support the constant function, replace it with the env function

The padding is set to 12 pixels above, if the rotation direction is:

Step 3: Use min() and max() methods @supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }}fixed element fixed problem

If the page title is implemented at the front and fixed at the top, it will be blocked. At this time, you can set the top value to the safe distance value, such as:

.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);} Here's how to adapt html5 simple iphoneX bangs. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.