码迷,mamicode.com
首页 > 其他好文 > 详细

H5适配 iponex

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

标签:网址   outer   sha   const   viewport   bottom   com   ado   name   

直接上代码:

项目: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

标签:网址   outer   sha   const   viewport   bottom   com   ado   name   

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

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!