首页 > 技术文章 > H5适配 iponex

hjpqwer 2018-09-14 18:31 原文

直接上代码:

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

推荐阅读