DZMM Firefox Keyboard Fix のソースコード

DZMM Firefox Keyboard Fix

修复 Firefox 移动端虚拟键盘遮挡聊天输入框的问题，通过 visualViewport API 动态调整页面布局
右端で折り返す
// ==UserScript==
// @license MIT
// @name         DZMM Firefox Keyboard Fix
// @namespace    https://www.dzmm.ai/
// @version      1.0
// @description  修复 Firefox 移动端虚拟键盘遮挡聊天输入框的问题，通过 visualViewport API 动态调整页面布局
// @author       Allex0716
// @match        https://www.dzmm.ai/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const visualViewport = window.visualViewport;
    if (!visualViewport) return; // 浏览器不支持，直接退出

    const BASE_BOTTOM_INSET = 56; // 原有的底部导航栏高度 3.5rem = 56px

    /**
     * 根据键盘高度动态调整页面布局
     *
     * 原理：
     * - Chrome: 键盘弹出时 layout viewport 会自动缩小，innerHeight === visualViewport.height，
     *   此时 keyboardHeight = 0，不会产生任何副作用
     * - Firefox: 键盘弹出时 layout viewport 不变，visualViewport.height 变小，
     *   keyboardHeight = 键盘实际高度，main 容器被推上去，输入框露出
     */
    function handleKeyboardChange() {
        const keyboardHeight = Math.max(0, window.innerHeight - visualViewport.height);

        // 1. 将主容器底部向上推，让输入框露出来
        const main = document.querySelector('main.fixed.bottom-0');
        if (main) {
            main.style.bottom = keyboardHeight + 'px';
        }

        // 2. 同步更新 CSS 变量，让侧边栏和浮动按钮也跟随调整
        document.documentElement.style.setProperty(
            '--app-bottom-inset',
            (BASE_BOTTOM_INSET + keyboardHeight) + 'px'
        );
    }

    // 键盘弹出/收起时 visualViewport 会触发 resize 事件
    visualViewport.addEventListener('resize', handleKeyboardChange);

    // Firefox 键盘弹出时可能触发 scroll 而非 resize，额外监听
    visualViewport.addEventListener('scroll', handleKeyboardChange);
})();