目录
[Stylus 插件配置详解](#Stylus 插件配置详解)
[第二步：创建 Gemini 专属样式](#第二步：创建 Gemini 专属样式)
要在 Gemini 中完美应用宽屏样式，通过 Stylus 插件进行定制是最稳定的方案。以下是关于如何操作 Stylus 插件并部署代码的详细步骤。
Stylus 插件配置详解
第一步：安装插件
商店直达地址
https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
如果你尚未安装，请根据浏览器前往应用商店：
-
Chrome / Edge : 在 Chrome 应用商店搜索 Stylus。
-
Firefox : 在 Add-ons 页面搜索 Stylus。
第二步：创建 Gemini 专属样式
-
打开 Gemini 官方网站。
-
点击浏览器工具栏上的 Stylus 图标。
-
在弹出菜单中，找到"为此 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 都能享有同样的宽屏体验。