解决 H5 键盘遮挡与页面上推

【解决 H5 键盘遮挡与页面上推问题的核心思路】

放弃使用 position: fixed 布局，改用 Flex 布局。
容器高度动态绑定到 window.visualViewport.height（可视高度）。
键盘弹出时，可视高度会缩小，Flex 布局会自动重新计算，将输入框挤压在剩余可视空间底部。

html 复制代码

<template>
    <view class="test-container">
        <!-- 模拟顶部导航栏，始终固定在顶部 -->
        <view class="nav"></view>

        <!-- 模拟中间滚动区域，使用 flex: 1 占据剩余空间，并开启内部滚动 -->
        <view class="main">
            <div style="height: 2200px;background-color: aqua;"></div>
        </view>

        <!-- 模拟底部输入区域，不使用 fixed，而是随 Flex 容器自然排布 -->
        <input class="test-input" @blur="blur" @focus="focus" type="text" v-model="testValue" placeholder="请输入内容">
        <input class="test-input1" @blur="blur" @focus="focus" type="text" v-model="testValue" placeholder="请输入内容">
    </view>
</template>

核心逻辑：监听可视视口（Visual Viewport）的变化

移动端键盘弹出时，window.innerHeight 不一定会变，但 window.visualViewport.height 一定会变

javascript 复制代码

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const testValue = ref('');
// 初始高度使用 100dvh (动态视口高度)，确保初始状态正确
const viewportHeight = ref('100dvh');

const onResize = () => {
    if (window.visualViewport) {
        // 1. 将容器高度更新为当前真实的"可视区域"高度
        viewportHeight.value = window.visualViewport.height + 'px';
        
        // 2. 关键：强制让外部页面回滚到顶部 (0,0)
        // 很多手机浏览器在输入框聚焦时会尝试"上推"整个页面，这会破坏 fixed 或 Flex 布局
        // 通过 scrollTo(0, 0) 抵消这种浏览器默认行为
        window.scrollTo(0, 0);
    }
};

onMounted(() => {
    // 监听 resize（键盘弹出、收起）
    window.visualViewport?.addEventListener('resize', onResize);
    // 监听 scroll（部分手机系统在键盘弹出时会触发 scroll）
    window.visualViewport?.addEventListener('scroll', onResize);
});

onUnmounted(() => {
    window.visualViewport?.removeEventListener('resize', onResize);
    window.visualViewport?.removeEventListener('scroll', onResize);
});

const blur = () => {
    console.log('键盘收起');
}

const focus = () => {
    console.log('键盘弹出');
}

</script>

动态绑定计算后的可视高度viewportHeight

css 复制代码

<style lang="scss" scoped>
.test-container {
    width: 100%;
    // 动态绑定计算后的可视高度
    height: v-bind(viewportHeight);
    display: flex;
    flex-direction: column;
    background-color: red;
    // 必须禁止容器外部滚动，所有滚动都在内部 .main 进行
    overflow: hidden;
}

.nav {
    height: 80rpx;
    background: blue;
    // 禁止被压缩
    flex-shrink: 0;
}

.main {
    // 自动拉伸占据剩余所有空间
    flex: 1;
    background: green;
    // 开启内部纵向滚动
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; // 保证 iOS 滚动顺滑
}

.test-input {
    height: 100rpx;
    background-color: yellow;
    flex-shrink: 0; // 保证在键盘弹出高度被挤压时，输入框本身高度不缩放
}


.test-input1 {
    height: 100rpx;
    background-color: aqua;
    flex-shrink: 0;
}
</style>