pwa中解决虚拟键盘遮挡输入框的核心是动态监听键盘状态并调整布局。通过visualviewport.resize事件、focus+scrollintoview组合策略、合理viewport设置及vh/svh等相对单位实现跨平台适配。
PWA 中虚拟键盘弹出遮挡输入框，核心是监听键盘状态并动态调整视图布局，而不是依赖固定高度或硬编码偏移。
监听键盘显示/隐藏事件
现代浏览器（Chrome 108+、Edge 110+）支持 visualViewport 的 resize 事件和 keyboard API（实验性），可较可靠感知软键盘行为：
- 使用
visualViewport.addEventListener('resize', ...)捕获视口尺寸变化，当visualViewport.height明显变小（如减少 200px 以上），大概率是键盘弹出 - 配合
window.matchMedia('(max-height: 600px)').matches等媒体查询辅助判断设备是否处于小屏+键盘活跃状态 - 注意：iOS Safari 不触发
resize，需 fallback 到focus+scrollIntoView组合策略
聚焦时滚动输入框到可视区域
对 input/textarea 元素绑定 focus 事件，主动滚动使其可见，避免被键盘盖住：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 调用
element.scrollIntoView({ block: 'center', behavior: 'smooth' })，比block: 'nearest'更稳妥 - 在 iOS 上，建议延迟 100–200ms 执行 scroll（等键盘动画开始后再滚动），否则易失效
- 避免对整个页面
scrollTop操作，优先用scrollIntoView，它更精准且兼容性好
适配 viewport 协议与缩放控制
确保 <meta name="viewport"> 设置合理，防止键盘触发强制缩放导致布局错乱：
- 必须包含
width=device-width, initial-scale=1，禁用user-scalable=no（否则 iOS 键盘可能无法正确重绘视口） - 避免设置
maximum-scale或minimum-scale，它们会干扰键盘弹出时的自动视口调整 - 部分安卓 WebView 需额外加
viewport-fit=cover以适配刘海屏+键盘场景
用 CSS 容器查询或高度单位规避硬编码
避免用固定 px 值做“键盘高度补偿”，改用相对方案提升鲁棒性：
- 用
vh或svh（small viewport height）定义表单区域高度，svh在键盘弹出时自动收缩，更符合预期 - 结合
@container查询（需启用 container queries）监听父容器可用高度变化，动态切换布局 - 对关键输入区域添加
scroll-margin-top: 20px，让scrollIntoView留出安全间距
不复杂但容易忽略。关键是把键盘当作一个动态影响视口的环境变量，而不是需要“修复”的 bug。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
