H5页面适配iphoneX底部小黑条遮盖内容

iphoneX取消了物理按键,改为底部小黑条,这也在页面开发的过程中,会出现底部内容被小黑条遮盖的现象,影响页面效果,
我们可以这也解决
1:增加viewport属性 viewport-fit=”cover”
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”>

2 利用constant函数 这个函数是ios11新增的css属性用于设定安全区域与边界的距离

safe-area-inset-left 安全区域与左右上下的距离

safe-area-inset-right

safe-area-inset-top

safe-area-inset-bottom

body{
padding-bottom:constant(safe-area-inset-bottom);
}
3:对fixed元素的适配
类型一: fixed 元素完全吸低(bottom=0)

通过增加内边距扩展高度
{
padding-bottom:constant(safe-area-inset-bottom);
}
通过calc覆盖原来高度
{
height:calc(30(假设值)+constant(safe-area-inset-bottom));
}
还有一种是新增空白元素
{
position:fixed;
bottom:0;
height:constant(safe-area-inset-bottom);
width:100%;
background:#fff;
}
类型二:fixed元素不完全吸底
通过外边距来处理
{
margin-bottom:constant(safe-area-inset-bottom);
}
还有一种通过calc覆盖原来bottom值
{
bottom:calc(20(设定值)+constant(safe-area-inset-bottom));
}