vue H5解决安卓手机软键盘弹出,页面高度被顶起

开发中安卓机上遇到的软键盘弹出导致布局问题

• 直接上代码^_

在这里插入代码片
<div class="container"><div class="appContainer" :style="{height:isKeyboardOpen? Heights :'inherit'}"><p class="name"><!-- 绑定输入框聚焦和失焦事件 --><input class="grow" type="text" v-model="name" @focus="handleInputFocus"@blur="handleInputBlur"/></p></div><!-- 给 footer 添加动态类名 --><div :class="['footer', { 'keyboard-active': isKeyboardOpen }]"><div class="next" @click="nextClick">下一步</div><div class="step next" @click="stepClick">上一步</div></div></div>

在这里插入代码片
data() {return {name:'',isKeyboardOpen: false,originalWindowHeight: window.innerHeight,isAndroid: /Android/i.test(navigator.userAgent),Heights:'inherit'};
}
mounted() {if(this.isAndroid) {// 监听窗口大小变化window.addEventListener("resize", this.handleWindowResize);}
},
beforeDestroy() {// 移除监听事件，防止内存泄漏if (this.isAndroid) {        window.removeEventListener("resize", this.handleWindowResize);}
},
methods: {stepClick(){console.log('上一步');},nextClick(){ if(!this.name){Toast("请输入姓名");return;}console.log('下一步');},handleInputFocus() {if (this.isAndroid) {// 输入框聚焦时触发窗口大小检查this.handleWindowResize();}},handleInputBlur() {if (this.isAndroid) {// 输入框失焦时触发窗口大小检查this.handleWindowResize();}},handleWindowResize() {if (this.isAndroid) {const currentWindowHeight = window.innerHeight;this.Heights=currentWindowHeight + 'px';                this.isKeyboardOpen = currentWindowHeight < this.originalWindowHeight;// 通过比较窗口高度判断键盘是否打开}}
}
<style>// 键盘弹出时隐藏 footer.footer.keyboard-active {// display: none;//这一种写法调起键盘时有闪烁问题position: relative;//一种方法bottom: 0;}
</style>