☰

DZMM Firefox Keyboard Fix

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

Nasıl kurarım

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!)

Nasıl kurarım

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!) 

// ==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);
})();