<p>目前不存在 keyboard-inset-* 这类标准 CSS 环境变量，截至2026年5月未被任何主流浏览器正式支持；真正可用的键盘高度检测需依赖 JavaScript 监听 visualViewport.resize 事件并对比 height 变化。</p>
目前不存在 keyboard-inset-* 这类标准 CSS 环境变量。这是常见误解，源于对 iOS Safari 实验性 API 或早期草案的误传。
为什么查不到 keyboard-inset-top 等变量
截至 2026 年 5 月，keyboard-inset-top、keyboard-inset-height 等并非 W3C 标准，也未被 Chrome、Firefox 或 Safari（包括最新 iOS 17.5+）正式支持。你在 DevTools 的 @environment 或 env() 列表里找不到它们——因为它们根本没实装。
- 部分开发者混淆了 WebKit 内部调试标记或旧版提案（如 2022 年 Apple 提出的
keyboard-visibility原始草稿），但该草案已被搁置 - Safari 技术预览版曾短暂暴露过
env(keyboard-inset-height)，但仅限特定构建，且未进入稳定通道 - MDN、CanIUse 和 Chromium Bug Tracker 均无对应条目
真正可用的键盘高度检测方案
必须依赖 JavaScript 捕获输入法弹出/收起事件，并结合视口变化推断虚拟键盘高度。CSS 本身无法“感知”键盘状态。
- 监听
focusin/focusout+resize：iOS Safari 在键盘弹出时会触发resize，同时window.innerHeight显著变小（通常减少 200–400px） - 用
visualViewport.height更可靠：它在键盘展开时实时收缩，比window.innerHeight延迟更低、精度更高 - 避免只靠
scrollY或document.body.scrollHeight：这些值在键盘出现时可能不变，尤其在viewport设置为height=device-height时失效
简单示例：
立即学习“前端免费学习笔记（深入）”；
let lastHeight = window.visualViewport?.height || window.innerHeight;
window.visualViewport?.addEventListener('resize', () => {
const currentHeight = window.visualViewport.height;
if (currentHeight < lastHeight - 100) {
document.documentElement.style.setProperty('--kb-height', `${lastHeight - currentHeight}px`);
} else {
document.documentElement.style.removeProperty('--kb-height');
}
lastHeight = currentHeight;
});
用 CSS 自定义属性配合 JS 动态调整布局
把 JS 测得的高度写入 :root 的 CSS 变量，再在布局中引用——这是目前最稳妥的“响应式键盘避让”模式。
- 务必加防抖：键盘弹出/收起过程中
resize可能高频触发，不节流会导致样式反复重绘 - 不要直接操作
margin-bottom或padding-bottom：优先用transform: translateY()或bottom（配合position: absolute）避免触发布局重排 - 对
fixed定位的输入框下方按钮，可这样处理：
.submit-btn {
position: fixed;
bottom: calc(20px + var(--kb-height, 0px));
transition: bottom 0.2s ease;
}
注意：calc() 中不能省略单位，var(--kb-height, 0) 写成 0 会报错，必须是 0px。
真正的难点不在“怎么写变量”，而在于 iOS 键盘收起时 visualViewport.height 可能延迟恢复（尤其在快速切换输入框时），需要加 timeout 回退兜底；Android 各厂商 WebView 行为更碎片化，必须单独 UA 检测 + fallback。这些细节一旦漏掉，底部按钮就会卡在半空几秒。
