网页afe-area适配iPhone X浏览器及小程序

适配效果：未适配（图一）、适配后（图二）

Safari浏览器及其它app浏览器中的适配 viewport-fit 及 CSS ：

• 错误写法：viewport-fit:cover 时 env() 是不起作用的

• 正确写法：viewport-fit=cover

• 完整写法：

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no,viewport-fit=cover">
  

  
  <div id="tabbar">
      <div>首页</div>
      <div>分类</div>
      <div>我的</div>
  </div>     
  
  

  iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离：

  • env(safe-area-inset-bottom)

  
  对于不支持env() 的浏览器，浏览器将会忽略它。
  
  需要适配的tabbar添加CS或者及小程序的CSS：
  
  padding-bottom: env(safe-area-inset-bottom);
  
  #tabbar{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100vw;
      height: 50px;
      padding-bottom: env(safe-area-inset-bottom);
  }