移动端input聚焦时页面被键盘顶起，本质是浏览器自动滚动调整视口所致；解决思路包括聚焦时强制回滚、禁用默认滚动、适配安全区及优化结构布局。
移动端 input 聚焦时页面被键盘顶起，本质是浏览器为显示输入框自动滚动并调整视口（viewport）所致。这个问题在 iOS 上尤为明显，常导致头部错位、按钮被遮挡、固定定位元素偏移等。解决核心思路是：聚焦时不触发意外滚动、聚焦后手动控制可视区域、或让关键内容“抗顶”。
监听 focus 事件 + 强制滚动回原位置
适用于页面有 fixed 头部/底部，且不希望整体上移的场景。原理是在 input 获取焦点瞬间，记录当前 scrollTop，然后在 focus 后立即 scroll 回去。
- 用 setTimeout 延迟执行 scroll，避开浏览器默认滚动时机（iOS 中需约 100ms 延迟才有效）
- 对 position: fixed 元素，还需配合 transform: translateZ(0) 或 will-change: transform 防止渲染异常
- 注意只对需要保护的 input 触发，避免影响表单内自然滚动需求（如长表单）
禁用默认滚动行为（iOS 专用）
iOS Safari 在 input 聚焦时会尝试将输入框置于视口中央，可通过 CSS 属性抑制该行为：
- 给 input 或其父容器添加 scroll-margin: 0（部分新版本支持）
- 更通用做法：设置 body { height: 100vh; overflow-y: hidden; }，聚焦时临时启用，失焦恢复（需配合 body 滚动状态缓存）
- 慎用 preventDefault() 在 focus 事件中——它无法阻止 iOS 的自动滚动，反而可能引发兼容问题
用 viewport-fit 和安全区适配键盘弹出
针对 iPhone X 及更新机型，键盘弹出会影响 safe-area-inset-bottom。合理利用可缓解布局错乱：
- 在 meta viewport 中加入 viewport-fit=cover，允许内容延伸至屏幕边缘
- 用 env(safe-area-inset-bottom) 设置底部留白，例如：padding-bottom: env(safe-area-inset-bottom);
- 结合 JS 监听 resize 事件判断键盘是否弹出（height 显著变小），动态添加 class 控制布局（如降低 footer z-index 或隐藏非必要元素）
结构优化：避免 input 被“挤”到可视区外
很多“被顶起”其实是输入框初始位置太靠下，键盘一出就触发浏览器强制滚动。从源头减少触发条件：
- input 尽量放在视口上半部分；若必须在底部，用 position: absolute 或 fixed 定位，并设 bottom: env(safe-area-inset-bottom)
- 避免在 modal 或弹层中嵌套过深的 input，改用全屏表单页或 native-like 浮层（z-index + transform 升级图层）
- 对 WebView 场景（如微信、App 内嵌），可调用客户端 API 主动控制键盘高度，比纯 H5 更可靠
