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));
}
![1](https://img-blog.csdnimg.cn/20190508181445821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FubGFuSmlvbg==,size_16,color_FFFFFF,t_70)