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 的 height=device-height？这个配置早被主流浏览器废弃，Chrome 从 59+、Safari 从 iOS 10+ 就不再支持。写上不仅无效，还可能干扰其他 viewport 行为（比如缩放控制）。 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西