Gemini网页版宽屏模式实现教程

Gemini网页版宽屏模式是一种通过修改网页CSS样式，使网页内容在浏览器中呈现全宽屏显示效果的方法。这种方法可以提升用户体验，尤其是在使用大屏幕显示器时，可以让网页内容更加饱满和美观。下面将详细介绍如何通过安装Stylus插件并编写CSS代码来实现Gemini网页版的宽屏模式。

首先，用户需要在浏览器中安装Stylus插件。以Microsoft Edge浏览器为例，Stylus插件可以直接在Edge的扩展商店中找到并安装。

安装完成后，用户需要将特定的CSS代码复制到Stylus插件中。这些代码针对Gemini网页的不同部分进行样式调整，以达到全宽屏的效果。具体代码如下：

/* =================================================================
Gemini 暴力全宽屏 (用户消息 + 回复 + 输入框) - 修正版
================================================================= */

/* 1. 最外层容器：这是你最早确认有效的代码 */
.conversation-container,
main > div {
max-width: 95% !important;
}

/* 2. 底部输入框区域：保持宽屏 */
.input-area-container,
.bottom-container,
div[class="input-area"] {
max-width: 95% !important;
width: 95% !important;
margin-left: auto !important;
margin-right: auto !important;
}

/* 3. 用户消息的“宿主”标签 (自定义标签) */
user-query,
user-query-content {
max-width: 100% !important;
width: 100% !important;
flex: 1 1 auto !important;
}

/* 4. 关键层级：处理 AdGuard 抓到的那个“右对齐容器” */
span.user-query-container,
div.user-query-container,
:right-align-content {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
justify-content: flex-start !important;
}

/* 5. 视觉层级：真正的灰色气泡背景 */
.user-query-bubble-with-background,
.user-query-bubble-container {
max-width: 100% !important;
width: 100% !important;
border-radius: 8px !important;
}

/* 6. 内容层级：气泡里的文字和图片轮播 */
.query-text,
.query-text-line,
user-query-file-carousel,
.file-preview-container {
max-width: 100% !important;
width: 100% !important;
}

/* — (可选) 修复图片预览可能变得过大的问题 —
如果图片被拉伸得太丑，取消下面的注释 */
img.preview-image {
width: auto !important;
max-height: 300px !important;
}

通过上述步骤，用户可以轻松实现Gemini网页版的宽屏模式，从而获得更加沉浸式的浏览体验。