CSS移动端防止软键盘顶起页面_设置body高度或固定容器尺寸

应使用 JavaScript 动态监听 focusin/blur 和 resize 事件结合 window.innerHeight 实时更新容器高度避免依赖 100vh 或 viewport height 配置关键交互元素禁用 position: fixed改用 absolute relative 布局。软键盘弹出后页面被顶起body 高度失效怎么办移动端浏览器尤其 iOS Safari在软键盘弹出时会动态缩放视口、重排布局body 的 height: 100vh 或 100% 会按“缩放后的可视区”计算导致实际高度变小内容上浮、按钮被顶出屏幕。这不是 CSS 写错了是浏览器行为本身不可靠。别用 100vh 做全屏容器高度iOS 下它会在键盘弹出后骤减比如从 667px 掉到 400px优先监听 resize 事件用 window.innerHeight 动态更新容器高度而不是依赖 CSS 固定值Android Chrome 相对稳定但也要防万一iOS 必须处理且 resize 触发有延迟需加防抖position: fixed 容器在键盘弹出后错位或消失固定定位元素如底部输入框、悬浮按钮在软键盘唤起时部分 Android 浏览器会强制将其“推高”iOS 则可能让 fixed 元素脱离视口甚至渲染异常。根本原因是 fixed 依赖的“视口”基准在键盘弹出时被浏览器篡改。避免对关键交互区域如输入框、发送按钮单独使用 position: fixed改用 position: absolute 父容器 position: relative bottom: 0并确保父容器高度可控比如用 JS 设置若必须用 fixed需在 resize 后手动重置 top 或 bottom 值依据 window.innerHeight 计算监听 resize 不够用补上 focusin 和 blurresize 在键盘弹出/收起时触发不稳定尤其 iOS常漏掉第一次弹出或收起瞬间。单纯靠它做高度适配会出现“闪一下再调整”的视觉跳变。对所有可聚焦的输入类元素input、textarea监听 focusin立刻记录当前 window.innerHeight设为“键盘未起时的高度”监听 blur延时 300ms 再恢复高度给键盘收起留出时间避免误判把 resize 当兜底三者配合才能覆盖大部分机型和触发路径要不要用 viewport 的 heightdevice-height这个配置早被主流浏览器废弃Chrome 从 59、Safari 从 iOS 10 就不再支持。写上不仅无效还可能干扰其他 viewport 行为比如缩放控制。 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西