移动端输入框聚焦时页面被顶起或挤压，本质是ios safari和部分安卓webview对position: fixed元素的viewport重定位行为与键盘弹出逻辑叠加导致的视觉错位；需结合scroll-margin、合成层及focusout延迟重置三者协同解决。
移动端输入框聚焦时页面被顶起或挤压，本质不是 CSS 写错了，而是 iOS Safari 和部分安卓 WebView 对 position: fixed 元素的 viewport 重定位行为与键盘弹出逻辑叠加导致的视觉错位。单纯调 scrollIntoView 或改 body 高度，往往治标不治本，甚至引发双滚动、失焦后 window.scrollY 残留等问题。
iOS 中 fixed 元素被顶起的根本原因
不是 CSS 失效，是浏览器在键盘弹出时强制滚动视口，把 input 推到可视区中央——这个行为会覆盖 position: fixed 的渲染层。哪怕你给 header 或底部按钮加了 fixed，只要它没启用合成层，就大概率在键盘弹起瞬间“飘走”。
-
env(safe-area-inset-bottom)必须配合bottom: env(safe-area-inset-bottom)使用，否则 safe-area 计算错乱会放大偏移 -
height: 100vh在键盘弹出时会被压缩，导致布局塌陷，应改用min-height: 100vh或height: 100dvh（iOS 17.4+ 支持） - 微信 X5 内核（v13.x）对
scroll-margin支持极差，不能依赖
真正有效的 CSS 层面抑制方案
比 JS 监听更轻量、更稳定。重点不是“让它不动”，而是“不让浏览器强行把它推到中间”。
- 给目标
input加scroll-margin: 0，直接切断浏览器默认居中逻辑 - 包裹该
input的父容器设overflow: hidden或contain: layout，阻止滚动传播 - 对需锚定的
fixed元素（如底部提交按钮），必须加transform: translateZ(0)或will-change: transform，强制创建独立合成层 - 避免对
body或html设置transform，只作用于具体元素；Vue/React 中动态 class 切换时要确保transform不被条件渲染抹掉
focus/focusout 事件中必须处理的残留问题
很多方案只解决聚焦瞬间，却忽略失焦后 window.scrollY 值未恢复，导致后续下拉、点击位置错位。
- 在
focusout回调里，**不能立刻**执行window.scrollTo(0, 0) - 要用
setTimeout(() => window.scrollTo(0, 0), 150)，延迟 100–200ms 等待键盘收起动画完成 - 加判断：仅当
window.scrollY > 0且当前无其他滚动操作时才重置，避免干扰用户主动滚动 - 监听
resize时注意区分键盘弹起（window.innerHeight缩小 >60px）和横竖屏切换（变化幅度更大）
最棘手的从来不是“怎么让它不顶”，而是“顶完之后怎么让页面回到原位且不闪、不抖、不卡”。iOS 17.4 和微信 X5 是当前兼容性验证的两个关键节点，测试时务必覆盖这两处。合成层 + scroll-margin + focusout 延迟重置，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
