首页 > 其他 > 详细

H5适配 iponex

时间:2018-09-14 19:07:09      阅读:143      评论:0      收藏:0      [点我收藏+]

直接上代码:

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

H5适配 iponex

原文:https://www.cnblogs.com/hjpqwer/p/9648257.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!