DZMM Firefox Keyboard Fix

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

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

작성자
allex0716
일일 설치 수
0
총 설치 수
0
평점
0 0 0
버전
1.0
생성일
2026-07-25
갱신일
2026-07-25
크기
1.9KB
라이선스
MIT
적용 사이트

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

注意事项

技术信息