H5 安卓手机软键盘弹出挤压页面导致变形解决

问题:

在做移动端h5页面时，安卓端软键盘弹起会导致页面压缩变形, IOS 无此问题.

原因分析:

在 Android 和 IOS 上，软键盘弹起和收起状态下，页面 webview 表现不同。

安卓端： 安卓中，如果将footer元素设置为position:fixed或absolute，因为软键盘会改变页面的高度（将页面顶上来），因此footer元素也跟着移动上来，导致页面变形；

IOS端： 苹果的软键盘是覆盖的（分层），软键盘不会改变页面高度, 因此H5页面显示没有什么问题。

解决方案:

当键盘弹出的时候，通过 js 设置固定body高度。

<template>
  <div class="lay-out-box" :style="{height: scrollerHeight}">
  </div>
</template>

<script>
data(){
    return {
      scrollerHeight: 0
    }
  },
  mounted () {
    const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
    console.log(originalHeight, "originalHeight")
    window.onresize = ()=>{
        return(()=>{
            //键盘弹起与隐藏都会引起窗口的高度发生变化
            const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
            console.log("页面初始高度:"+originalHeight);
            console.log("软键盘弹起高度:"+resizeHeight);
            if(resizeHeight-0<originalHeight-0){
            //当软键盘弹起，在此处操作
            console.log("进入到软键盘弹起:");
                document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
                this.scrollerHeight=resizeHeight;
            }else{
            //当软键盘收起，在此处操作
            console.log("进入到软键盘收起:");
            document.querySelector('body').setAttribute('style', 'height:100%;');
            this.scrollerHeight="100%";
            }
        })()

    }
  },
</script>