适配 iPhoneX 安全区域, IOS 系统特有变量

IOS11 为了适配 iPhoneX 对现有 viewport meta 标签新增了一个扩展viewport-fit，用于设置网页在可视窗口的布局方式，可设置三个值：auto(默认，表现和contain一致) ， contain， cover;

说明:
IOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量;
IOS11.2之后CSS函数改成了env()，为了做兼容，这两者要同时写在css文件里面。这四个预定义的常量用来设定安全区域与边界的距离。

注意: 这四个值只有在viewport-fit=cover时才生效，默认值auto、或者viewport-fit=contain时是不生效的。

uniapp 在 unpackage\dist\build\app-plus\__uniappview.html 中, 默认帮我们添加了兼容代码

<script>
	var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
	document.write(
	'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
	(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>

一般底部安全区通常为68rpx

预定义的常量:
屏幕上安全距离: safe-area-inset-top
屏幕右安全距离: safe-area-inset-right
屏幕下安全距离: safe-area-inset-bottom
屏幕左安全距离: safe-area-inset-left

iOS 11

padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

iOS 11.2+

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

兼容性写法：

注意: 两者顺序不能换，先constant，再env。

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
box-sizing: content-box; /* 使padding可以撑起高度*/

作为CSS全局变量去使用, uniapp 使用 page 作为根元素, html是使用:root作为根元素

page {  
    --safe-area-inset-top: 0px;  
    --safe-area-inset-right: 0px;  
    --safe-area-inset-bottom: 0px;  
    --safe-area-inset-left: 0px;  

}  

@supports (top: constant(safe-area-inset-top)) {  
    page {  
        --safe-area-inset-top: constant(safe-area-inset-top);  
        --safe-area-inset-right: constant(safe-area-inset-right);  
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);  
        --safe-area-inset-left: constant(safe-area-inset-left);  
    }  
}  

@supports (top: env(safe-area-inset-top)) {  
    page {  
        --safe-area-inset-top: env(safe-area-inset-top);  
        --safe-area-inset-right: env(safe-area-inset-right);  
        --safe-area-inset-bottom: env(safe-area-inset-bottom);  
        --safe-area-inset-left: env(safe-area-inset-left);  
    }  
}  

用法

.container{
	padding-bottom: var(--safe-area-inset-bottom);  
	height: calc(100vh - var(--safe-area-inset-bottom) - var(--safe-area-inset-top));
}

参考:
https://www.freesion.com/article/5417476475/
https://blog.csdn.net/weixin_44714325/article/details/113110076