移动端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 无法获取到还未渲染的部分，导致高度计算比实际高度要大一些，底部的某些内容就看不见了，返回上一个路由重进就ok了，与是debug发现 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;
},
...
各位大佬关于自适应和兼容有什么建议可以留言哦，本人菜鸟求指教，谢谢.........