Gemini 网页端自定义教程：利用 Stylus 强制开启宽屏显示

目录

[Stylus 插件配置详解](#Stylus 插件配置详解)

第一步：安装插件

[第二步：创建 Gemini 专属样式](#第二步：创建 Gemini 专属样式)

第三步：编写与部署代码

效果展示

关键参数调整建议

常见问题排查

---

要在 Gemini 中完美应用宽屏样式，通过 Stylus 插件进行定制是最稳定的方案。以下是关于如何操作 Stylus 插件并部署代码的详细步骤。

---

Stylus 插件配置详解

第一步：安装插件

商店直达地址

https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

如果你尚未安装，请根据浏览器前往应用商店：

• Chrome / Edge : 在 Chrome 应用商店搜索 Stylus。

• Firefox : 在 Add-ons 页面搜索 Stylus。

第二步：创建 Gemini 专属样式

1. 打开 Gemini 官方网站。

2. 点击浏览器工具栏上的 Stylus 图标。

3. 在弹出菜单中，找到"为此 URL 编写样式"下方显示的 gemini.google.com（或者点击 管理 -> 新建样式）。

第三步：编写与部署代码

在打开的编辑窗口中，粘贴以下经过优化的代码。这段代码针对宽度限制和容器对齐做了精确覆盖：

CSS

/* 设置 Gemini 域名生效范围 */
@-moz-document domain("gemini.google.com") {
    /* 强制修改对话框及其容器的宽度 */
    .conversation-container, 
    .main-content, 
    .input-area-container,
    .p-f-p-message-content {
        /* 将最大宽度限制放宽至 85% */
        max-width: 85% !important;
        /* 确保在大屏下依然水平居中 */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 内部响应容器设为 100% 以填满父级空间 */
    response-container {
        max-width: 100% !important;
    }

    /* 修正代码块在大屏幕下的宽度表现 */
    .code-block-declaration {
        width: 100% !important;
    }
}

效果展示

---

关键参数调整建议

如果你对显示效果有特殊需求，可以微调代码中的数值：

修改目标	对应参数	建议值
超宽屏/带鱼屏	max-width	调整为 90% 或 95%
大屏固定宽度	max-width	设置为固定值如 1400px
文字阅读舒适度	line-height	在内容选择器中加入 line-height: 1.6;

常见问题排查

• 样式未生效 ：请检查 Stylus 主面板中该样式的复选框是否已勾选，并确保 domain 限制正确指向 gemini.google.com。

• 输入框错位：部分 UI 更新可能会改变类名，如果发现输入框没有变宽，可以尝试使用浏览器的开发者工具（F12）检查输入区域最外层容器的新类名。

• 云端同步：建议在 Stylus 的设置中开启"云同步"功能（支持 Dropbox/OneDrive 等），这样你在不同电脑上登录 Gemini 都能享有同样的宽屏体验。