"VirtualKeyboard API：软键盘可视窗口与布局策略"

概述VirtualKeyboard API 暴露软键盘的几何信息与显示状态，支持页面选择是否让内容覆盖（`overlaysContent`）。适合聊天、输入密集型页面在移动端优化布局与滚动行为。示例if ('virtualKeyboard' in navigator) { navigator.virtualKeyboard.overlaysContent = true navigator.virtualKeyboard.addEventListener('geometrychange', e => { const rect = navigator.virtualKeyboard.boundingRect document.documentElement.style.setProperty('--vk-bottom', rect.height + 'px') }) } .composer { position: fixed; bottom: var(--vk-bottom, 0); left: 0; right: 0 } 工程建议焦点与滚动：在输入框聚焦时滚动到可视区域；避免滚动抖动与重复布局计算。沉浸布局：启用 `overlaysContent` 时为底部工具栏留出变量空间；与安全区域 `env(safe-area-inset-bottom)` 协同。兼容：不支持的浏览器回退到传统 `resize`/视口观测；保持基本可用。参考与验证Chrome 平台文档（Virtual Keyboard）：https://developer.chrome.com/docs/web-platform/virtual-keyboard/web.dev 软键盘指南：https://web.dev/articles/virtual-keyboard