CSS兼容iPhone底部小横条_ios底部横条适配

1.H5网页设置viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=cover"/>
1

2.使用苹果官方推出的css函数env()、constant()来适配。
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离

而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover

.margin-bottom{
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
}
.padding-bottom{
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

/* 示例 */
.bottom-group{
    clear:both;float:left;width: 100%;
    border-top:1px solid #fafafa;
    background-color:#ffffff;overflow: hidden;position: fixed;left:0;bottom:0;right:0;z-index: 1;
    height:54px;
    /* 兼容 IOS<11.2 */
    height: calc(54px+ constant(safe-area-inset-bottom));
    /*兼容 IOS>11.2*/
    height: calc(54px + env(safe-area-inset-bottom));
    /*
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意 constant与env顺序不能改变，先constant再env