做一個輕應(yīng)用戏挡，鏈接到公眾號里面固逗，卻發(fā)現(xiàn)了一些扎心的問題.......
用戶總是反饋說我們的界面不好看，空間也空出來一大塊拘领，浪費(fèi)還不好看意乓，一堆被吐槽，心累约素，關(guān)鍵是我自己怎么看怎么都是正常的届良，結(jié)果.......他們用的是iPhone，唉圣猎，是我太窮了.......好了士葫，回歸正題
產(chǎn)品是這樣的，進(jìn)去的第一個界面就是登錄頁送悔，所以首先就會去點(diǎn)擊輸入框慢显，然后blabla輸入用戶名密碼登錄，然后進(jìn)入首頁欠啤，就發(fā)現(xiàn)下面的tab頁簽空出來一大塊鳍怨，真的是，唉跪妥，導(dǎo)出查找問題鞋喇，一度以為是高度獲取有問題，于是用下面的方式試了試
...
mounted(){
this.$nextTick(() => {
this.wrapperHeight = window.innerHeight - utils.computeRealPx(98);
});
},
...
然而眉撵，并沒有什么作用......
于是打算退出登錄重新試一下侦香，結(jié)果突然發(fā)現(xiàn)登錄頁下面怎么那么大一片空白落塑，然后我就往下滑了一下，就好了罐韩，于是我多試了幾次輸入框聚焦和失焦憾赁，可以確認(rèn)了，確實(shí)是軟鍵盤的鍋散吵，而且只有IOS會出現(xiàn)....然后就想著先去判斷設(shè)備是Android 還是IOS龙考，然后再吧頂上去的部分拉回來，于是就試了試下面的方法
...
// ios頁面輸入框失焦后界面需要?dú)w位
// 獲取設(shè)備類型
const u = navigator.userAgent;
const isiOS = !!u.match(/\\(i\[^;\]+;( U;)? CPU.+Mac OS X/);
// 如果是IOS設(shè)備
if (isiOS) {
let flag = false;
let pageBackNormFunc;
// 聚焦后矾睦，鍵盤彈起
document.body.addEventListener('focusin', () => {
flag = true;
pageBackNormFunc && clearTimeout(pageBackNormFunc)
});
// 失焦后晦款，鍵盤關(guān)閉
document.body.addEventListener('focusout', () => {
if (flag) {
// 頁面滾動回原來的位置
pageBackNormFunc = setTimeout(() => {
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })；
}, 200);
}
flag = false;
});
}
...
PS：window.scrollTo 不了解的可以點(diǎn)這里哦scrollTo
借來同事的手機(jī)試了試枚冗，真的是激動.....用了兩部iPhone手機(jī)測試缓溅，都o(jì)k了！Ａ尬隆坛怪！nice
這個問題就這樣可以解決了！
另外股囊，在開發(fā)中遇到一個問題就是袜匿，為了做一些設(shè)備的兼容，會使用計(jì)算的方法來給元素獲取高度和寬度稚疹，然而首次進(jìn)入某個界面的時候沉帮，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;
},
...
各位大佬關(guān)于自適應(yīng)和兼容有什么建議可以留言哦，本人菜鳥求指教缨该，謝謝.........
