DZMM Firefox Keyboard Fix

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

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu betiği yüklemek için bir betik yöneticisi eklentisi yüklemeniz gerekecektir.

(Zaten bir betik yöneticim var, hadi yükleyelim!)

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

Yazar
allex0716
Günlük kurulumlar
0
Toplam kurulumlar
0
Değerlendirmeler
0 0 0
Versiyon
1.0
Oluşturulma
25.07.2026
Güncellenme
25.07.2026
Boyut
1,9 KB
Lisans
MIT
Geçerli

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+ 均支持)

注意事项

技术信息