平常在开发H5的页面时，会遇到一个很常见的问题，就是当输入框弹出键盘时，底部被顶起，导致页面显示不全或者页面样式错落；

这个问题，一般都是由于input标签聚焦之后，键盘弹起导致的底部按钮顶上去了；

不过在IOS上，默认是不对导致按钮顶上去的，但是在Android上，默认是会顶上去的；这样在混合开发或者H5就要解决这样的一个兼容问题了；

这里提供一个解决方案，效果看起来也是不错的；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 默认的屏幕高度
const docH = window.innerHeight;
// 实时屏幕高度
let showH = window.innerHeight;
// 默认显示底部按钮
// let hideShow = true;

const bottom = document.getElementById("bottom");

// 监听页面高度的变化
window.addEventListener("resize", () => {
	showH = window.innerHeight;

	if (docH - showH > 50) {
		// 这里用vue的话你可以直接控制
		// hideShow = false;
		bottom.style.display = "none";
	} else {
		// hideShow = true;
		bottom.style.display = "block";
	}
});

效果预览:

然后你就会发现，当键盘弹起的时候底部按钮就消失不见了，键盘落下之后按钮就出来哦；

这个方案基本都可以解决兼容问题呢；