iOS Safari 中 position: fixed 元素不稳定主因是 100vh 计算错误，推荐用 100dvh 替代并配合脱离文档流定位及键盘场景 JavaScript 补偿。
iOS Safari 中 position: fixed 元素表现不稳定，常伴随页面滚动时错位、消失、或被键盘遮挡等问题，核心原因之一是 iOS 对 100vh 的计算不准确——它会把地址栏、底部工具栏等 UI 区域也计入视口高度，导致实际可用高度小于 100vh，进而影响 fixed 元素的定位基准和容器布局。
用 dvh 替代 100vh（推荐）
dvh（dynamic viewport height）是 CSS 新增的单位，代表“动态视口高度”，能随 iOS 地址栏展开/收起实时调整，比 100vh 更可靠：
- 支持 iOS 16.4+ 和主流新版 Android 浏览器，兼容性已较成熟
- 直接替换：
height: 100vh;→height: 100dvh; - 若需降级，可用
@supports检测并回退：@supports (height: 100dvh) {<br> height: 100dvh;<br>}<br>@supports not (height: 100dvh) {<br> height: 100vh;<br>}
避免 fixed 元素依赖父容器高度
当 fixed 元素嵌套在 height: 100vh 的父容器中时，iOS 可能因视口高度误判导致其定位偏移。建议：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- fixed 元素尽量脱离文档流层级，直接挂载在
<body>下（如弹窗、导航栏） - 不要给 fixed 元素的父容器设
height: 100vh或overflow: hidden - 用
top/bottom/left/right直接定位，而非依赖父容器尺寸计算
处理软键盘弹出导致的 fixed 错位
iOS 键盘弹出会触发视口缩放和滚动，使 fixed 元素“粘不住”。可配合 JavaScript 补偿：
立即学习“前端免费学习笔记（深入）”；
- 监听
focusin事件，在输入框聚焦时临时将 fixed 元素改为position: absolute，并手动设置top值 - 监听
resize或scroll（注意节流），在键盘收起后恢复fixed - 更轻量方案：给
<input>添加scrollIntoView({ behavior: 'smooth', block: 'nearest' })，减少页面跳动对 fixed 的干扰
慎用 viewport 的 height=device-height
旧方案中有人尝试在 meta 标签里加 height=device-height 强制锁定视口，但 iOS 已废弃该属性，且会导致缩放异常、双击放大失效等问题。当前最佳实践是：
- 保留默认 viewport 设置：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 用
dvh+ 简洁 fixed 结构 + 键盘场景微调，三者结合即可覆盖绝大多数 iOS 不稳定情况
