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 更少触发重排，但需配合 visualViewport API；不支持时降级到 focusin + setTimeout

真正难的不是写对某一行 CSS，而是处理 iOS 键盘收起后 window.innerHeight 不立即恢复、focusin 触发早于键盘完全展开、以及 Safari 对 window.scrollTo() 的节流策略——这些都得靠延迟、阈值判断和手动锚点恢复来兜底，不是可选项，是必做动作。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！