IOS上微信在輸入框彈出鍵盤后，頁面不恢復，下方有留白，有彈窗彈出時頁面內容感應區域錯位

 

問題說明：

ios中，鍵盤的彈起，頁面會往上挪動，使輸入框展示在頁面中間，鍵盤隱藏頁面會下挪恢復原狀。

在微信移動端，ios頁面不恢復，下方有留白。

收起鍵盤的瞬間，如果有彈窗彈出，此時時頁面內容應區域錯位。

問題栗子配圖：

 

解決方案：

其實只要知道了原因，坑填起來很簡單：輸入法的軟鍵盤影響了頁面的高度和位置。

我們重置頁面位置起始位置為0，重置頁面高度為初始高度。

 

核心代碼：

window.scroll(0, 0);
window.innerHeight = window.outerHeight = “頁面之前高度”

 

 

全部代碼：

<script>
data () {
    return {
      screenHeight: '';
    }
},
updated () {
    let that = this;
    this.$nextTick(function () {
        let $inputs = Array.from(document.getElementsByTagName('input'));
        /*let body = document.body;
        $inputs.forEach(item => { // 定時器是處理多個input間快速切換閃屏問題，可省略
            item.onblur = function () { // onblur是核心方法
                clearTimeout(body.timer);
                body.timer = setTimeout(() => {
                window.scroll(0, 0);
                window.innerHeight = window.outerHeight = that.screenHeight
                }, 150)
            }
            item.onfocus = function () {
                clearTimeout(body.timer)
            }
        })*/
       let body = document.body;
       $inputs.forEach(item => {
           item.onblur = function () { // onblur是核心方法
                window.scroll(0, 0);
                window.innerHeight = window.outerHeight = that.screenHeight
           }
       })
    })
},
mounted () {
    this.screenHeight = document.documentElement.clientHeight
}
</script>

 

 

 tips：因為只有微信端ios有問題，這個是判斷是否為微信瀏覽器的一段代碼

window.onload = function() {
    isWeixinBrowser();
}
//判斷是否微信瀏覽器
function isWeixinBrowser() {  
    var ua = navigator.userAgent.toLowerCase();  
    var result = (/micromessenger/.test(ua)) ? true : false;
    if (result) {
        console.log('你正在訪問微信瀏覽器');
    }
    else {
        console.log('你訪問的不是微信瀏覽器');
    }
    return result;
}