修复 Firefox 移动端虚拟键盘遮挡聊天输入框的问题,通过 visualViewport API 动态调整页面布局
一个修复 Firefox 移动端虚拟键盘遮挡聊天输入框问题的用户脚本。
在 Firefox 移动端打开 DZMM 聊天页面,点击底部输入框时,弹出的虚拟键盘会直接覆盖输入框,导致看不到正在输入的内容。安装此脚本后,键盘弹出时页面会自动上移,输入框始终可见。
Firefox 处理虚拟键盘的方式与 Chrome 不同:
| 浏览器 | 键盘弹出时的行为 |
|---|---|
| Chrome Android | 自动缩小页面可视区域,内容区上移 |
| Firefox Android | 页面可视区域不变,键盘直接盖在内容上方 |
DZMM 页面使用 position: fixed 将主聊天区域锚定在屏幕底部。Chrome 缩小可视区域后,fixed 容器的底部跟随上移,输入框自然露出;Firefox 不缩小可视区域,fixed 容器底部不动,输入框被键盘挡住。
通过 visualViewport API 监听键盘弹出/收起:
visualViewport.height 变小window.innerHeight - visualViewport.height<main> 容器的 bottom 设为键盘高度,整个聊天区域被推上去--app-bottom-inset CSS 变量,侧边栏和浮动按钮跟随调整visualViewport.height 恢复 → bottom 归零 → 布局复原修复前(Firefox 默认) 修复后(安装脚本)
┌──────────────┐ ┌──────────────┐
│ Header │ │ Header │
├──────────────┤ ├──────────────┤
│ │ │ │
│ 消息列表 │ │ 消息列表 │
│ │ │ (缩小) │
│ │ │ │
├──────────────┤ ├──────────────┤
│ [输入框] │ ← 看不见 │ [输入框] │ ← 可见 ✅
│⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨│ │⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨│
└──────────────┘ └──────────────┘
keyboardHeight 始终为 0,脚本不做任何调整)visualViewport API(Firefox 68+、Chrome 61+、Safari 13+ 均支持)https://www.dzmm.ai/* 页面生效@grant none)@grant none)