DZMM Firefox Keyboard Fix

修复 Firefox 移动端虚拟键盘遮挡聊天输入框的问题,通过 visualViewport API 动态调整页面布局

K instalaci tototo skriptu si budete muset nainstalovat rozšíření jako Tampermonkey, Greasemonkey nebo Violentmonkey.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Violentmonkey.

K instalaci tohoto skriptu si budete muset nainstalovat rozšíření jako Tampermonkey nebo Userscripts.

You will need to install an extension such as Tampermonkey to install this script.

K instalaci tohoto skriptu si budete muset nainstalovat manažer uživatelských skriptů.

(Už mám manažer uživatelských skriptů, nechte mě ho nainstalovat!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Už mám manažer uživatelských stylů, nechte mě ho nainstalovat!)

Autor
allex0716
Denně instalací
0
Celkem instalací
0
Hodnocení
0 0 0
Verze
1.0
Vytvořeno
25. 07. 2026
Aktualizováno
25. 07. 2026
velikost
1,9 KB
Licence
MIT
Spustit na

DZMM Firefox Keyboard Fix 使用指南

这是什么?

一个修复 Firefox 移动端虚拟键盘遮挡聊天输入框问题的用户脚本。

在 Firefox 移动端打开 DZMM 聊天页面,点击底部输入框时,弹出的虚拟键盘会直接覆盖输入框,导致看不到正在输入的内容。安装此脚本后,键盘弹出时页面会自动上移,输入框始终可见。

背景

浏览器差异

Firefox 处理虚拟键盘的方式与 Chrome 不同:

浏览器 键盘弹出时的行为
Chrome Android 自动缩小页面可视区域,内容区上移
Firefox Android 页面可视区域不变,键盘直接盖在内容上方

DZMM 页面使用 position: fixed 将主聊天区域锚定在屏幕底部。Chrome 缩小可视区域后,fixed 容器的底部跟随上移,输入框自然露出;Firefox 不缩小可视区域,fixed 容器底部不动,输入框被键盘挡住。

原理

通过 visualViewport API 监听键盘弹出/收起:

  1. 键盘弹出 → visualViewport.height 变小
  2. 计算出键盘高度 = window.innerHeight - visualViewport.height
  3. <main> 容器的 bottom 设为键盘高度,整个聊天区域被推上去
  4. 同步更新 --app-bottom-inset CSS 变量,侧边栏和浮动按钮跟随调整
  5. 键盘收起 → visualViewport.height 恢复 → bottom 归零 → 布局复原
修复前(Firefox 默认)              修复后(安装脚本)
┌──────────────┐                   ┌──────────────┐
│   Header     │                   │   Header     │
├──────────────┤                   ├──────────────┤
│              │                   │              │
│  消息列表    │                   │  消息列表    │
│              │                   │  (缩小)       │
│              │                   │              │
├──────────────┤                   ├──────────────┤
│ [输入框]     │ ← 看不见          │ [输入框]     │ ← 可见 ✅
│⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨│                   │⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨⌨│
└──────────────┘                   └──────────────┘

兼容性

  • Firefox 移动端(目标平台,直接解决问题)
  • Chrome / Safari(无副作用 — keyboardHeight 始终为 0,脚本不做任何调整)
  • 依赖 visualViewport API(Firefox 68+、Chrome 61+、Safari 13+ 均支持)

注意事项

技术信息