安卓键盘顶起底部菜单问题

开发移动端时,
我们在将底部菜单设置为 display:fixed;bottom:0;
在ios手机上是没问题的,
但是在安卓手机上,
手机自带键盘弹出时,
底部菜单会被键盘顶起,
解决这个问题我们需要在全局初始化时做一些js判断:

window.addEventListener('resize', function(){
	// 兼容安卓键盘顶起底部menu
	if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) {
		//ios这块什么都不用做
	} else {
		//安卓触发window.resize
		var body_h =  document.documentElement.clientHeight;
		var _menu = document.querySelector('.footer')
		if(client_h > (body_h*1.2)){
			_menu ? _menu.style.height = '0' : null
			_menu ? _menu.style.paddingTop = '0' : null
		}else{
			_menu ? _menu.style.height = 'auto' : null
			_menu ? _menu.style.paddingTop = '0.2rem' : null
		}
	}
}, false);

基本原理是:
先判断平台，
如果是安卓平台,就监听窗口变化，
如果窗口缩小就证明底部键盘弹起，这时候触发js隐藏底部菜单，
如果收回的时候就显示。

上面代码是我的大致思路,可以有多种写法,只要目的达到就OK!

---

还有一种方法是使用粘性布局，
但是这个兼容性有待验证，
而且如果需要一致在最底部的话对布局层级有一定要求，
粘性布局就是将需要定位的盒子设置position定位，
将fixed改为sticky。

	display: sticky;

关于粘性布局的解释和用法请自行百度！