The meaning of adaptation

The visible and operational area is within the security area.

No adaptation:

Meaning of safe zone

A rectangle not obscured by rounded corners, flat bangs, and a small black Home Indicator.

H5 page ADAPTS to security zone

body { padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); // constant padding takes effect on iOS<11.2: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); //env is available on iOS>=11.2}Copy the code

Application: the safety zone should be used flexibly according to specific scenarios.

Key: safe-area-inset-left: indicates the distance between the security zone and the left boundary safe-area-inset-right: indicates the distance between the security zone and the right boundary safe-area-inset-top: indicates the distance between the security zone and the left boundary. Distance from the safe zone to the top boundary Safe-area-inset-bottom: Distance from the safe zone to the bottom boundary Note: The safe-area-inset-direction is essentially a length. So it can be used directly as the property value of the padding property.

Extension: The meta tag has a property called viewport-fit, which, as the name suggests, is how web content is filled in the device’s visual window. There are two filling methods:

The visible window contains all the web pagesCopy the code

Before we do the security zone adaptation, we need to set our viewport-fit to cover, and then do the padding adaptation.

That is to say, the need to put the whole web content full, on the basis of full to set up the left and right spacing, so step by step more rigorous adaptation of our security zone.

Specific code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
Copy the code

Wechat embedded H5 adaptive security zone

First of all, the H5 embedded in wechat supports landscape and portrait screens. So we’re going to write reactive, and when we say reactive, we have to think about media query @media.

Secondly, let’s analyze the embedded page of wechat. There is a navigation bar at the top and back and forward buttons at the bottom (except for the first page, the first page cannot go back to the previous page, so there is no bottom navigation bar), as shown in the figure above. So when we do security compatibility, we just judge the padding at the bottom.

In landscape and portrait, compatibility at the bottom is also needed to prevent the problem of small black bars blocking when the first page does not have the bottom navigation bar. The next step is to accommodate the fringe danger zone on the left and the danger zone on the right.

Code implementation:

@media all and (orientation : portrait){ body { padding-bottom: constant(safe-area-inset-bottom); Padding-bottom: env(safe-area-inset-bottom); //constant padding-bottom: env(safe-area-inset-bottom); // @media all and (orientation: landscape) {body {padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); Padding-left: env(safe-area-inset-left); //constant padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); //env on iOS>=11.2}}Copy the code

Remember to add:

html,body {
    height: 100%;
}
Copy the code

Applets fit the security zone

ios-iphoneX { padding-bottom: constant(safe-area-inset-bottom); Padding-bottom: env(safe-area-inset-bottom); //constant padding-bottom: env(safe-area-inset-bottom); //env is available on iOS>=11.2}Copy the code

Then add the ios-iphonex class to the WXML root element’s class. Since the applet doesn’t support landscape and the applet’s navigation bar automatically ADAPTS to the bangs screen, we only need to consider the small black bar at the bottom of the phone.

IPhone /iPad landscape font gets bigger

The most rigorous solution: add an attribute

-webkit-text-size-adjust: 100%;
Copy the code

To explain the -webkit-text-size-adjust property:

There are many particularly advanced properties in CSS3, but they are only supported by the WebKit kernel. Text-size-adjust is one of these advanced properties, so we use it with the prefix -webkit, and it only works on mobile devices.

-webkit-text-size-adjust: auto // The default value. The text size can be adjusted according to the device size. -webkit-text-size-adjust: none; // The text size is not adjusted according to device size. -webkit-text-size-adjust: percentage; // The font size is a percentage of the original font size.Copy the code

When developing pages, we need to actively use some powerful WebKit-specific properties to improve the user experience. This is in line with the “incremental enhancement, elegant degradation” philosophy that page developers have been following.