有效解决移动端虚拟键盘影响fixed定位问题

看下图（demo），让我们心中有个概念，类似图中的布局--页面有个输入框，底部有个按钮，这样的布局很常见，比如支付页面，留言页面等，一般我们会把按钮fixed定位到页面底部，但是随之也产生了问题--当我们点击输入框的时候会调起虚拟键盘，然后我们的按钮被顶上去了。

起初想法：我们可以在input框聚焦和失焦的时候，对按钮进行操作，比如显示/隐藏；

于是写了个demo做测试，感觉没有什么问题，沾沾自喜（too young too naive），然后发现虚拟键盘有自带的收起功能，点击后input仍然处于聚焦状态，看来还需要另寻其他解决方法。

之后想法：可以通过视口的高度变化做相应处理，不废话，直接上解决方法代码：

var height = window.innerHeight;
复制代码

这句代码是获取当前视口的高度，当虚拟键盘被调起后，该高度也会变化；

window.addEventListener('resize', function(){
	if(window.innerHeight < height){
		// 写你自己的逻辑
	}
});
复制代码

为止有效的解决了fixed定位元素被虚拟键盘顶上去的尴尬。

路漫漫其修远兮...

欢迎各位浏览我的博客，分享前端路上的经验。