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

  • 相关阅读:
    Charles 手机抓包HTTPS设置以及证书安装
    Charles 抓包配置
    charles Windows 安装
    charles 过滤指定域名
    charles 手机证书下载安装
    charles 手机抓包设置
    charles overvoew
    charles 主界面总结
    charles 右键菜单
    获取近一周,近两周,本月,上个月
  • 原文地址:https://www.cnblogs.com/hjpqwer/p/9648257.html
Copyright © 2011-2022 走看看