页面底部输入框聚焦时吸底软键盘方案
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中,软键盘的弹起并不会导致页面高