移动端底部fixed按钮被软键盘遮挡的本质是浏览器对fixed定位在键盘弹出时行为不一致；推荐用sticky替代、监听键盘状态、利用env(keyboard-inset-bottom)变量或嵌入输入框内布局来解决。
移动端底部 fixed 按钮（比如输入框旁的“发送”按钮）被软键盘顶起或遮挡，本质是浏览器对 position: fixed 在软键盘弹出时行为不一致导致的——部分安卓 WebView 和旧版 iOS 会重排视口、压缩 visualViewport，但 fixed 元素仍按原始视口高度定位，结果卡在键盘底下。
用 position: sticky 替代 fixed（推荐首选）
适用于按钮紧贴页面内容底部（如聊天列表底部的输入区），不脱离文档流，能随滚动自然响应视口变化：
- 给按钮容器设
position: sticky; bottom: 0;，同时确保父容器有明确高度且可滚动 - 需配合
z-index和background防止内容穿透 - 兼容性良好（iOS 15.4+、Android Chrome 90+ 均支持，旧版可渐进增强）
监听软键盘状态，动态调整按钮位置
通过 focusin/focusout + 视口高度变化判断键盘是否弹出：
- 记录页面初始
window.innerHeight - 输入框聚焦时，若当前高度明显变小（如减少 200px 以上），说明键盘已弹出，将按钮改为
position: absolute; bottom: 0;并设bottom为键盘高度估算值（如env(keyboard-inset-bottom)） - 失焦后恢复
fixed或移除内联样式 - 注意：iOS 16.4+ 支持
keyboardAPI，可用keyboard.locked更精准判断
利用 CSS 环境变量 env(keyboard-inset-bottom)
iOS Safari 16.4+ 原生支持该变量，直接适配键盘高度：
立即学习“前端免费学习笔记（深入）”；
- 按钮样式写成：
bottom: env(keyboard-inset-bottom, 0px); - 搭配
position: fixed即可自动上浮，无需 JS - 安卓暂不支持，需加降级（如
@supports not (bottom: env(keyboard-inset-bottom)) { ... }）
结构优化：把按钮放在输入框内部（最稳妥）
不依赖视口定位，彻底避开 fixed 问题：
- 将“发送”按钮作为输入框的右侧
suffix，用display: flex布局嵌入表单容器 - 按钮始终与输入框绑定，键盘弹出时随 input 自动上推
- 适合表单类场景（如搜索、评论），UI 一致性高，无兼容性风险
不复杂但容易忽略。核心思路是：少依赖 fixed，多借力文档流和环境变量，必要时用 JS 补位。
