应使用 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 和 blur
resize 在键盘弹出/收起时触发不稳定（尤其 iOS），常漏掉第一次弹出或收起瞬间。单纯靠它做高度适配，会出现“闪一下再调整”的视觉跳变。
- 对所有可聚焦的输入类元素（
<input>、<textarea></textarea>）监听focusin：立刻记录当前window.innerHeight，设为“键盘未起时的高度” - 监听
blur：延时 300ms 再恢复高度（给键盘收起留出时间），避免误判 - 把
resize当兜底，三者配合才能覆盖大部分机型和触发路径
要不要用 viewport 的 height=device-height？
这个配置早被主流浏览器废弃，Chrome 从 59+、Safari 从 iOS 10+ 就不再支持。写上不仅无效，还可能干扰其他 viewport 行为（比如缩放控制）。
立即学习“前端免费学习笔记（深入）”；
- 删掉
viewport中所有含height的配置项，只保留width=device-width, initial-scale=1 - 不要尝试用
min-height或max-height在 body 上硬撑，CSS 层面无法对抗浏览器对视口的劫持 - 真正的控制点只有一个：用 JS 拿到真实的
window.innerHeight，并把它作用到一个可操作的容器上（比如<main></main>或<div id="app">） <p>最麻烦的不是怎么写，而是不同机型下键盘高度不一致、触发时机不一致、事件是否冒泡也不一致——所以别指望一套 CSS 解决，JS 控制 + 多事件监听 + 实时高度同步，才是目前唯一靠谱的路径。</p> </div>
