H5适配 iponex

Posted 2021-01-06 hjpqwer

直接上代码：

项目：head里添加meta标签：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

CSS:
在body 添加css：
@supports (bottom: constant(safe-area-inset-bottom)) {
　　body {
　　　　padding-bottom: constant(safe-area-inset-bottom);
　　}
}
在底部写一个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);
　　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 这里最清楚