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

各位大佬關于自适應和相容有什麼建議可以留言哦，本人菜鳥求指教，謝謝.........