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;
}