H5移动端底部固定ios兼容

问题一、之前写的底部导航栏固定用的是绝对定位（fixed）做的，在安卓是没问题的，但在ios无法固定住（原因：安卓是相对浏览器做的定位，ios是相对滚动条做的定位，这个原因不是很确定啦，表述可能会有问题，看到的小伙伴可以略过啦~）
解决方法：页面中不使用绝对定位（fixed），改为页面100%布局。

<!-- demo：头部和底部固定的一个布局 -->
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
.header{
    width:100%;
    position:fixed;
    height:100px;
    background: #2237fa;
  }
  .content{
    height: calc(100vh - 200px);
    overflow: scroll;
  }
  .footer{
    width:100%;
    height:100px;
    background: #2237fa;
  }

问题二、ios底部固定的问题就解决，然后发现固定的位置在ios中距离底部还有一段距离
解决方法：添加viewport-fit=cover，使页面占满整个屏幕，加index.html页面

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