iphone/iphoneX 状态栏高度/底部安全区域高度
状态栏高度
- iphone 20
- iphoneX 44
iphoneX 安全区域高度
34
在H5上适配安全区域
viewport-fit默认有3个值：
- contain：可视窗口完全包含网页内容（左图）
- cover：网页内容完全覆盖可视窗口（右图）
- auto：默认值，此值不影响初始布局视图端口，并且整个web页面都是可查看的。
contain和cover具体区别如下图：
而我们需要将viewport设置为cover，env和constant才能生效。设置代码如下：
<metaname="viewport"content="width=device-width,initial-scale=1.0,viewport-fit=cover">同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换。
/*可以通过增加padding-bottom来适配*/
padding-bottom:constant(safe-area-inset-bottom);/*兼容IOS<11.2*/
padding-bottom:env(safe-area-inset-bottom);/*兼容IOS>11.2*/
/*可以通过margin-bottom来适配*/
margin-bottom:constant(safe-area-inset-bottom);
margin-bottom:env(safe-area-inset-bottom);
/*或者改变高度*/
height:calc(55px+constant(safe-area-inset-bottom));
height:calc(55px+env(safe-area-inset-bottom));也可以在底部添加一个空白的div颜色块来做适配。
还有一种是使用@supports隔离兼容样式
可以使用@supports来隔离兼容样式，当浏览器支持bottom:constant(safe-area-inset-bottom)或者bottom:env(safe-area-inset-bottom)的时候，bottom-button类就会新增margin-bottom的样式
@supports(bottom:constant(safe-area-inset-bottom))or(bottom:env(safe-area-inset-bottom)){
.bottom-button{
margin-bottom:constant(safe-area-inset-bottom);
margin-bottom:env(safe-area-inset-bottom);
}
}