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>