移动端IOS H5（VUE）界面被键盘顶起，键盘收起后无法恢复正常

   做一个轻应用，链接到公众号里面，却发现了一些扎心的问题.......

   用户总是反馈说我们的界面不好看，空间也空出来一大块，浪费还不好看，一堆被吐槽，心累，关键是我自己怎么看怎么都是正常的，结果.......他们用的是iPhone，唉，是我太穷了.......好了，回归正题

   产品是这样的，进去的第一个界面就是登录页，所以首先就会去点击输入框，然后blabla输入用户名密码登录，然后进入首页，就发现下面的tab页签空出来一大块，真的是，唉，导出查找问题，一度以为是高度获取有问题，于是用下面的方式试了试

...
mounted(){
    this.$nextTick(() => {
        this.wrapperHeight = window.innerHeight - utils.computeRealPx(98);
    });
},
...

   然而，并没有什么作用......

   于是打算退出登录重新试一下，结果突然发现登录页下面怎么那么大一片空白，然后我就往下滑了一下，就好了，于是我多试了几次输入框聚焦和失焦，可以确认了，确实是软键盘的锅，而且只有IOS会出现....然后就想着先去判断设备是Android 还是IOS，然后再吧顶上去的部分拉回来，于是就试了试下面的方法

...
// ios页面输入框失焦后界面需要归位
// 获取设备类型
const u = navigator.userAgent;
const isiOS = !!u.match(/\\(i\[^;\]+;( U;)? CPU.+Mac OS X/);
// 如果是IOS设备
if (isiOS) {
    let flag = false;
    let pageBackNormFunc;
    // 聚焦后，键盘弹起
    document.body.addEventListener('focusin', () => {
        flag = true;
        pageBackNormFunc && clearTimeout(pageBackNormFunc)
    });
    // 失焦后，键盘关闭
    document.body.addEventListener('focusout', () => {
        if (flag) {
            // 页面滚动回原来的位置
            pageBackNormFunc = setTimeout(() => {
                window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })； 
            }, 200);
        }
        flag = false;
    });
}
...

PS：window.scrollTo 不了解的可以点这里哦scrollTo

借来同事的手机试了试，真的是激动.....用了两部iPhone手机测试，都ok了！！！nice

这个问题就这样可以解决了！

另外，在开发中遇到一个问题就是，为了做一些设备的兼容，会使用计算的方法来给元素获取高度和宽度，然而首次进入某个界面的时候，vm.refs[ref].getBoundingClientRect().top 为 0，所以采用如下判断的方式给赋值之后就可以了

...
computeHeight(vm, ref, flag, other) {   let htmlFont = document.getElementsByTagName("html")\[0\].style.fontSize;   let bottomHeight = flag ? 0 : 98/75*htmlFont.slice(0, htmlFont.length-2);   // let bottomHeight = 0;
    other = other ? other/75*htmlFont.slice(0, htmlFont.length-2) : 0;  var top = vm.$refs\[ref\].getBoundingClientRect().top ? vm.$refs\[ref\].getBoundingClientRect().top : this.computeRealPx(100);  return  document.documentElement.clientHeight - top - bottomHeight-other;
},
computeRealPx(size){    let htmlFont = document.getElementsByTagName("html")\[0\].style.fontSize;
    size = size/75*htmlFont.slice(0, htmlFont.length-2);    return size;
},
...

各位大佬关于自适应和兼容有什么建议可以留言哦，本人菜鸟求指教，谢谢.........