应使用 viewport-fit=cover 并配合 env(safe-area-inset-bottom) 动态设置按钮容器 padding-bottom，避免 bottom: 0 导致被软键盘遮挡，确保 iPhone X 及以上机型底部按钮始终可见。
移动端输入框聚焦后弹出软键盘，常导致底部按钮被遮挡，尤其在iPhone X及更新机型上更明显。核心解法是结合 viewport-fit=cover 与 CSS 安全区域（env() / constant()）动态预留底部空间，让按钮始终可见。
设置 viewport-fit=cover 并启用安全区域
默认 viewport 会自动缩放页面避开刘海和底部 Home 指示条，但这也可能压缩内容、影响布局。需主动声明覆盖全屏，并手动处理安全边界：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
这样浏览器才允许你通过 env(safe-area-inset-bottom) 获取底部安全距离（如 iPhone X 底部约 34px），否则该值为 0。
立即学习“前端免费学习笔记（深入）”；
用 env() 动态撑开按钮容器底部
不要把按钮固定在 bottom: 0 —— 这样会被键盘顶走。正确做法是给按钮的父容器（比如 .form-footer）设置内边距或最小高度，留出安全区域：
- 推荐用
padding-bottom: env(safe-area-inset-bottom); - 兼容旧 iOS（padding-bottom: constant(safe-area-inset-bottom);
- 若按钮需“悬浮+吸底”，可用
margin-bottom: env(safe-area-inset-bottom);配合position: fixed
键盘弹出时进一步适配（可选增强）
仅靠安全区不够——软键盘弹出会改变视口高度，可能让按钮暂时移出可视区。可监听 focus 事件，临时提升按钮层级或滚动到可视位置：
- 给 input 添加
focus事件，调用element.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - 配合 CSS
scroll-margin-bottom（现代浏览器支持）：给按钮设scroll-margin-bottom: env(safe-area-inset-bottom); - 避免用
resize监听窗口变化（iOS Safari 不稳定），优先用focus/blur控制
基本上就这些。关键不是“挡住再修”，而是从布局源头预留空间，再叠加交互微调。viewport-fit 和 env() 是基础，滚动与滚动锚点是补强，二者结合基本覆盖所有主流 iOS 场景。
