移动端键盘弹起引起的fixed,flex,absolute布局问题

移动端键盘弹起引起的fixed,flex,absolute布局问题

在开发过程中，难免会遇到按钮吸底的操作的需求，一般都会借助定位和flex布局来实现，但在移动端，会被系统的键盘“撑破”。导致吸底按钮或footer顶上来。

由于项目为内部项目，不做贴图说明。
解决方案: 监听resize事件，当屏幕高度发生变化时，控制元素的隐藏展示。

let win_h = document.body.clientHeight;
	window.addEventListener('resize', ()=>{
		    if(document.body.clientHeight + 15 < win_h){ //+15 为自定义的误差范围
		    	//document hide
		    }else{
		    	//document show
		    }
	})

思路就是，判断系统键盘被调起时，隐藏元素，收起时，展示元素。
从而避免出现被“撑破”的局面。