页面底部输入框聚焦时吸底软键盘方案
0、参考布局
可能存在的问题
* 输入框未跟随软键盘弹起
* 输入框被顶起超过软键盘的高度
* 输入框被系统手势按钮遮挡
* 输入框没有被键盘挡住，但收起键盘后页面不会回落
* ios safari标签栏位于底部时 100vh并不是真实的高度，导致输入框被标签栏遮挡
* 输入框被顶起时，页面顶部被顶到了可视区域外
解决方案
1、Android
监听resize事件
在Android中，软键盘弹起会导致页面高度变化，压缩页面，因此可以通过监听window的resize事件，并实时修改容器高度来保证输入框位于软键盘之上
window.addEventListener('resize', this.convertStyle);
convertStyle() {
this.$refs.container.style.setProperty('window.innerHeight', `${height}px`);
},
2、IOS
通过VisualViewport监听resize事件
在IOS中，软键盘的弹起并不会导致页面高