Safe area?
The safe area refers to a range of visible windows, and the content in the safe area is not affected by rounded corners (corners), straight bangs (sensor housing), and small black bars (Home Indicator), as shown in the blue area in the following figure:
In other words, if we want to do a good job of adaptation, we must ensure that the page is visible and the operable area is within the safe area.
For more details, refer to the document: Human Interface Guidelines - iPhoneX
viewport-fit
viewport metaA new feature of iOS11, in order to adapt to an extension of iPhoneX to the existing label by Apple , it is used to set the layout of the web page in the visible window. Three values can be set:
- contain: The visible window completely contains the content of the web page (left image)
- cover: The content of the webpage completely covers the visible window (right picture)
- auto: default value, consistent with contain
Note: The webpage does not add extensions by default, which means viewport-fit=contain. If you need to adapt to iPhoneX, you must set viewport-fit=cover, which is a key step for adaptation.
For more detailed description, refer to the document: viewport-fit-descriptor
env() and constant()
A new feature of iOS11, a CSS function of Webkit, used to set the distance between the safe area and the boundary, there are four predefined variables:
- safe-area-inset-left: The distance between the safe area and the left border
- safe-area-inset-right: The distance between the safe area and the right border
- safe-area-inset-top: the distance between the safe area and the top border
- safe-area-inset-bottom: The distance between the safe area and the bottom border.
Here we only need to pay attention to the variable safe-area-inset-bottom, because it corresponds to the height of the small black bar (the value is different for horizontal and vertical screens).
Note: env() does not work when viewport-fit=contain, it must be used with viewport-fit=cover. For browsers that don't support env(), the browser will ignore it.
Need to do backwards compatibility like this:
padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
Note: env() and constant() need to exist at the same time, and the order cannot be changed.
For more details, refer to the document: Designing Websites for iPhone X
how to fit
After understanding the knowledge points mentioned above, the idea of our adaptation is very clear.
Step 1: Set the layout of the web page in the visible window
Add the viweport-fit attribute to make the page content completely cover the entire window:
<meta name="viewport" content="width=device-width, viewport-fit=cover">
As mentioned earlier, env() can only be used if viewport-fit=cover is set.
Step 2: The main content of the page is limited to the safe area
This step is selected according to the actual page scene. If this value is not set, there may be cases where small black bars block the bottom content of the page.
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
Step 3: Adaptation of fixed elements
Type 1: fixed fully bottom-absorbing element (bottom = 0), such as the two cases in the following figure: the
height can be expanded by adding padding:
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
Or overwrite the original height by calculating the function calc:
{
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
}
Note that this solution requires that the suction bottom bar must have a background color, because the background of the extended part follows the outer container, otherwise there will be a hollow situation.
else
type one
Another solution is to add a new element (empty color block, mainly used for the height of the small black bar), and then the bottom-absorbing element can only adjust the position without changing the height, like this:
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
Empty color blocks:
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #fff;
}
type two
fixed Non-complete bottom-absorbing elements (bottom ≠ 0), such as "return to top", "side advertisement", etc.
Only the position needs to be adjusted upwards, which can be handled only through the margin:
{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
Alternatively, you can also overwrite the original bottom value with the calculation function calc:
{
bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));
bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
}
@supports isolate compatible styles
Written here, we have already understood the two common types of fixed element adaptation schemes. If we only want to add new adaptation styles for iPhoneX, we can cooperate with @supports to isolate compatible styles. Of course, this processing will not actually have any impact on page display:
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
}