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"/>
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);
}
注意 constant与env顺序不能改变,先constant再env