H5适配 iponex

直接上代码:

项目: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 这里最清楚

猜你喜欢

转载自www.cnblogs.com/hjpqwer/p/9648257.html