iOS中fixed元素随键盘上浮是因Safari锚定layout viewport，需env(keyboard-inset-bottom)+@supports+fallback+JS协同解决，缺一不可。
iOS 中 position: fixed 元素随软键盘“上浮”或“卡在半空”，不是样式写错了，而是 Safari 把 fixed 锚定在冻结的 layout viewport 底部，而键盘弹出会把页面往上推——元素位置没变，但可视区域变了。纯 CSS 无法感知键盘状态，必须用 env(keyboard-inset-bottom) + JS 切换 + 容器约束三者协同，缺一不可。
为什么 env(keyboard-inset-bottom) 必须搭配 @supports 和 fallback
iOS Safari 16.4+ 才支持 env(keyboard-inset-bottom)，旧版（如 15.3）会直接忽略整条规则，甚至导致后续样式解析失败。不加 @supports 就等于把兼容性赌在单一版本上。
-
@supports (bottom: env(keyboard-inset-bottom))是硬性包裹条件，不能省略 - fallback 必须写成
bottom: env(keyboard-inset-bottom, 0px)，第二个参数是收起键盘后的回退值；只写env(keyboard-inset-bottom)会导致键盘收起后按钮悬空 -
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须存在，否则env()不生效 - 安卓完全不识别该变量，所以它只能作为 iOS 的增强项，不能替代 JS 逻辑
focusin 里读不到真实 bottom？必须用 setTimeout(() => {}, 0)
用户点击 input 触发 focusin 时，DOM 还没重排，getBoundingClientRect().bottom 返回的是键盘弹出前的坐标——直接用它算 bottom 值，结果永远偏高。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须加
setTimeout(() => { const rect = input.getBoundingClientRect(); ... }, 0)，让浏览器完成重排再取值 - 计算公式是
window.innerHeight - rect.bottom，不是rect.height或写死数值 - 要监听所有可聚焦元素：
input、textarea、[contenteditable]，漏掉textarea就等于漏掉一半场景 - blur 回调里必须立刻清除内联样式：
el.style.removeProperty('bottom')和el.style.removeProperty('top')，再恢复position: fixed，否则滚动时元素消失
absolute 模拟 fixed 时，根容器高度怎么不塌？
只写 position: absolute; bottom: 0 没用——如果父容器高度随键盘塌陷，absolute 元素照样飘走。关键在根容器（如 #app）必须“撑住”。
立即学习“前端免费学习笔记（深入）”；
- 根容器设
position: relative和min-height: 100vh（不是height: 100vh），否则键盘弹出时高度坍缩 - 底部区域必须加
width: 100%，否则横屏或缩放后左右偏移 - 禁止 body 滚动：
body { overflow: hidden; }或touch-action: manipulation，避免滚动干扰定位锚点 - 若用
transform: translateY()调整位置，比改bottom更少触发重排，但需配合visualViewportAPI；不支持时降级到focusin+setTimeout
真正难的不是写对某一行 CSS，而是处理 iOS 键盘收起后 window.innerHeight 不立即恢复、focusin 触发早于键盘完全展开、以及 Safari 对 window.scrollTo() 的节流策略——这些都得靠延迟、阈值判断和手动锚点恢复来兜底，不是可选项，是必做动作。
