Top safe distance
- iOS11 iPhoneX constant(safe-area-inset-top) = 88px
- iOS11 other models constant 64px (safe-area-inset-top) =
- iOS10 and below do not recognize and Andrews constant (safe-area-inset-top)
We need to set up some meta tags
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />// 64 为 iOS header 的高度
.ac-container {
// 默认值
padding-top: 0;
// iOS 11- iOS11.2
padding-top: calc(~'constant(safe-area-inset-top) - 64px');
// >= iOS11.2
padding-top: calc(~'env(safe-area-inset-top) - 64px');
}
- Does not recognize constant (safe-area-inset-top) and padding-top device calc default value of 0
- iOS11 iPhoneX padding-top calculated 24px, i.e., the height Qi Liu
- padding-top iOS11 other models are also calculated 0px
A safe distance from the bottom
- iOS11 iPhoneX constant(safe-area-inset-bottom) = 34px
- iOS11 other models constant (safe-area-inset-bottom) = 0px
- iOS11 and below do not recognize and Andrews constant (safe-area-inset-bottom)
// 如果默认值不为 0，需要加上默认值
.ac-container {
// 默认值
padding-top: 10px;
// iOS 11- iOS11.2
padding-top: calc(~"44 *(constant(safe-area-inset-bottom) / 34)");;
// >= iOS11.2
padding-top: calc(~"44 * (env(safe-area-inset-bottom) / 34)");;
}env() The method is supported in iOS11 in the beginning he was named constant(). In Safari Technology Preview 41 and the iOS 11.2 betaversions support, constant() it has been renamed env(). We can use the css fallback mechanism to fit all versions, if necessary, we can use the advance env() to adaptation.
About safe distance
.container {
padding: 12px;
// 左右安全距离
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}When using the safe area variable, and can not solve all the problems. For example, the page above, when the horizontal screen, env(safe-area-inset-left) there is a value, when the vertical screen, when env(safe-area-inset-left)=0px, at this time, the text will be pushed to the edge of the screen.
To solve this problem, in fact, is the need to padding set a default value, when safe-area-inset-left the time has value, is set to safe-area-inset-left, not when the value of the default value. We can use a new set of css function min() and max()to solve this problem. These two functions can accept any number of arguments, and returns the maximum or minimum. They can also be used calc(), or you can nest each other.
@supports(padding: max(0px)) {
.container {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}Note : @supports Statement can check whether to support the max, but do not use a variable in which, for example: @supports(padding: max(env(safe-area-inset-left)))because css treats invalid variable is returned to the default value, which is the initial value of the padding of this example. css-variables
In the above example, when the vertical screen, env(safe-area-inset-left) is 0, so the max function returns 12px. When the horizontal screen, env(safe-area-inset-left) the value is greater than 12, therefore, max function returns env(safe-area-inset-left) the value. This ensures that the dynamic adaptability of the page.