移动端无法用 position: fixed 使元素跟随键盘弹起，因 fixed 锚定视觉视口且不重排；推荐用 100dvh + flex 布局“推”到底部，或 env(keyboard-inset-bottom)（仅 Safari）与 visualViewport 监听（跨平台）组合降级方案。
移动端没有“让元素跟随键盘弹起”的通用 CSS 能力，position: fixed 本身就会被键盘顶起——这不是你写错了，而是它锚定的是视觉视口（visual viewport），而键盘一弹，这个视口就矮了，元素位置却没重算。真正能稳住底部元素的，是放弃 fixed、用布局逻辑“推”下去，或用新单位 + 新 API 主动响应。
为什么不能直接用 bottom: 0 + position: fixed
因为 iOS Safari 和多数安卓 WebView 把 fixed 元素钉在「初始视觉视口底边」，键盘弹出后视口高度压缩（比如从 667px → 350px），但浏览器不触发重排，元素坐标冻结，结果就是按钮飘到屏幕中间、甚至被顶出可视区。写 100vh 或 100% 同样无效——这些值不会随键盘动态更新。
用 100dvh + flex 布局把底部元素“推”到底
这是目前最轻量、兼容性较好（Chrome 105+、Safari 16.4+）、无需 JS 的方案，核心是让底部区域成为文档流一部分，靠 flex 布局分配空间：
-
min-height: 100dvh替代min-height: 100vh，确保根容器高度始终反映无键盘时的完整可视高度 - 根容器设
display: flex; flex-direction: column; - 主内容区加
flex: 1; overflow-y: auto;，撑满剩余空间且可独立滚动 - 底部元素（如按钮）作为兄弟节点，加
flex-shrink: 0;，防止被压缩 - 删掉
<meta>中的height=device-height，否则dvh失效
用 env(keyboard-inset-bottom) 让 iOS 自动上浮（仅限 Safari 16.4+）
这是最干净的原生解法，但只对 iOS 有效，必须搭配降级：
- 先加
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - CSS 中写：
bottom: env(keyboard-inset-bottom, 0px);—— 键盘弹出时自动上浮，收起回退 - 必须用
@supports (bottom: env(keyboard-inset-bottom))包裹，否则旧版 Safari 会忽略整条规则 - 安卓完全不支持，需 fallback 到
flex方案或visualViewport监听
监听 visualViewport 动态调整（跨平台较准）
比 resize 或 focusin 更可靠，能直接拿到键盘弹出后的真实可视高度：
- 页面加载时存基准高度：
const baseHeight = visualViewport.height; - 监听
visualViewport.addEventListener('resize', () => { ... }) - 计算差值：
const kbHeight = baseHeight - visualViewport.height; - 用
transform: translateY(${kbHeight}px)移动元素，比改top/bottom更少触发重排 - 不支持该 API 的环境（如 iOS 15.3）必须降级，不能只靠它
真正难的不是“怎么动”，而是判断“什么时候动”和“动多少”。focusin 事件太早，resize 太晚或不触发，innerHeight 在键盘未稳定时读不准——只有 visualViewport.height 或 100dvh + flex 这类声明式方案，才能绕过时机陷阱。别试图用 JS 算一个“完美 bottom 值”，那永远追不上键盘的节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
