记原生键盘弹起,H5页面被压缩的两种解决方案

记原生键盘弹起导致的H5页面压缩变形问题

方案一：监听页面变化,动态的展示和隐藏底部被顶上来的内容
原文参考:https://www.cnblogs.com/belongs-to-qinghua/p/12192846.html

data() {
    
    
    return {
    
    
        docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        hideshow:true  //显示或者隐藏footer
    }
},
watch: {
    
    
    //监听显示高度
    showHeight:function() {
    
    
        if(this.docmHeight > this.showHeight){
    
    
            //隐藏
            this.hideshow=false
        }else{
    
    
            //显示
            this.hideshow=true
        }
    }
},
mounted() {
    
    
    //监听事件
    window.onresize = ()=>{
    
    
        return(()=>{
    
    
            this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
        })()
    }
}

方案二：监听页面变化，键盘弹起时将变化之前的高度赋值给压缩后的页面
原文参考:https://blog.csdn.net/chenlim87/article/details/108234974?utm_medium=distribute.pc_relevant.none-task-blog-title-4&spm=1001.2101.3001.4242

// 获取当前可视区域的高度
mounted() {
    
    
	let height = document.documentElement.clientHeight
	window.onresize = () => {
    
     // 在页面大小发生变化时调用
    // 把获取到的高度赋值给根div
	document.getElementById('loginMain').style.height = height + 'px'
  }
}