H5在ios输入时底部fixed失效解决（vue）

先上图，输入前后对比（IOS底部是fixed，bottom:0。输入后,页面高度不对，中间出现空白，fixed失效）

输入前后fixed失效样式对比

解决方法：

html部分

//给blur绑定toTop方法
<div class="inputItem">
        <label for>手机号：</label>
        <input type="text" v-model="userInfo.mobilePhone" @blur="toTop" name id />
</div>

methods部分

    toTop(){    //苹果手机输入失去焦点空白解决
        // 软键盘收起的事件处理
            let ua = navigator.userAgent.toLowerCase();
            if (ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0) {  //判断苹果设备
              //滚动到顶部
                 window.scrollTo(0, 0) 
            }
      }

小结：

苹果设备唤起键盘后导致底下fixed失效，页面高度变化，中间出现空白，需要手动滑动下页面才能恢复。
这里通过监听input失去焦点时，自动使页面滚动到顶部，来恢复页面，不至于空白。