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

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

起初想法：咱们能够在input框聚焦和失焦的时候，对按钮进行操做，好比显示/隐藏；

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

以后想法：能够经过视口的高度变化作相应处理，不废话，直接上解决方法代码：

var height = window.innerHeight;
复制代码

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

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

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

路漫漫其修远兮...

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