移动端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;
},
...
           

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