移动端 fixed 失效主因是 iOS Safari 对 fixed 的特殊限制：键盘弹出导致 viewport 缩放、长页面滚动偏移、父容器创建新定位上下文、viewport meta 缺失。需规范 viewport、避免层叠上下文干扰、用 JS 补偿键盘场景，或改用 sticky/JS 模拟。

移动端使用 position: fixed 时出现“失效”——比如滚动时错位、被键盘顶起、或干脆不固定，根本原因不是 CSS 写错了，而是移动浏览器（尤其是 iOS Safari）对 fixed 的实现有特殊限制和行为差异。关键在于理解这些限制，并用适配策略绕过它们。

为什么 fixed 在 iOS 上“看起来失效”？

iOS Safari（包括微信内置浏览器）在以下场景会主动降级 fixed 行为：

• 页面存在 input 或 textarea 聚焦时，软键盘弹出会触发 viewport 缩放/重排，导致 fixed 元素随视口变化而偏移；
• 页面高度超过初始 viewport（如内容很长），滚动后 fixed 元素可能脱离预期位置，尤其在 zoom 不为 1 时；
• 使用了 transform、perspective 或某些 CSS 层叠上下文（如 will-change）的父容器，会创建新的定位上下文，使 fixed 相对于该容器而非视口；
• 未设置合适的 viewport meta 标签，例如缺少 user-scalable=no 或 width=device-width，导致 Safari 自动缩放干扰 fixed 定位。

基础修复：viewport 与基础样式规范

这是最常被忽略却最有效的一步：

• 确保 存在且生效（注意：iOS 10+ 对 user-scalable=no 支持有限，但仍是必要约束）；
• 给 html 和 body 设置 height: 100%，避免 body 高度塌陷影响 fixed 计算；
• 避免在 fixed 元素的任意祖先上使用 transform、filter、opacity 等会创建新层叠上下文的属性；
• 给 fixed 元素显式设置 top/bottom + left/right，不要只依赖 top: 0 却没设 width，防止宽度收缩异常。

键盘弹出时的 fixed 偏移问题

聚焦输入框后 fixed 元素被顶起，本质是 Safari 将 viewport 高度临时缩小。解决方案不是禁用键盘，而是监听并补偿：

• 监听 focusin 事件，在 input 获取焦点时，用 JS 记录当前 window.innerHeight，再通过 document.body.style.height = innerHeight + 'px' 锁定 body 高度，防止页面“回弹”；
• 同时将 fixed 元素改为 position: absolute，并动态计算其 top 值为 window.innerHeight - 元素高度，模拟固定效果；
• 在 blur 后恢复 position: fixed 和原始样式（注意加 setTimeout 微任务延迟，确保键盘已收起）。

替代方案：用 sticky 或 JS 模拟 fixed

当兼容性要求极高或场景复杂（如长列表中固定吸顶），可考虑更稳健的替代：

• position: sticky：适用于顶部/底部吸顶场景（如导航栏），iOS 12+ 支持良好，写法简单：position: sticky; top: 0;，无需 JS；
• 滚动监听 + absolute 模拟：监听 scroll，根据 window.scrollY 动态设置元素 top 值，配合 transform: translateZ(0) 提升为合成层，减少卡顿；
• 使用成熟库如 react-cool-stick（React）或 locomotive-scroll（通用），它们已封装好移动端 fixed 兼容逻辑。

不复杂但容易忽略——fixed 失效不是 bug，而是移动浏览器对用户体验的权衡。抓住 viewport、层叠上下文、键盘交互这三点，90% 的问题都能定位并解决。