直接上代码:
项目:head里添加meta标签:
<meta name="viewport" content="width=device-width, viewport-fit=cover">
注释:这个meta是必须加的
CSS:
在body 添加css:
@supports (bottom: constant(safe-area-inset-bottom)) {
body {
padding-bottom: constant(safe-area-inset-bottom);
}
}
@supports 是支持这个属性就会显示执行里面的语句
我的做法是
在底部写一个div把iponex 底部抬高,
注意:只有在iponex能识别的css constant(safe-area-inset-bottom); 34个像素 如果适配顶部:constant(safe-area-inset-top); 88像素,
<div class="outer-fixed"></div>
.outer-fixed{
position: fixed;
bottom: 0;
left:0;
right: 0;
height:constant(safe-area-inset-bottom); // 这个属性只在ipoenx 使用
height:env(safe-area-inset-bottom);
// box-shadow: 0 1px 6px rgba(0,0,0,.117647), 0 1px 4px rgba(0,0,0,.117647);
box-sizing: border-box;
background-color: #fff;
z-index: 99999;
}
参考网址:http://www.cnblogs.com/lolDragon/p/7795174.html 这里最清楚