zoukankan      html  css  js  c++  java
  • H5适配 iponex

    直接上代码:

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

  • 相关阅读:
    2020/5/8
    2020/5/8
    2020/5/6
    2020/4/30
    2020/4/29
    2020/4/28
    2020/4/27
    KMP算法详解
    博客搬家声明
    洛谷P2831 NOIP2016 愤怒的小鸟
  • 原文地址:https://www.cnblogs.com/hjpqwer/p/9648257.html
Copyright © 2011-2022 走看看