时间戳

首页 > 解决方案 > 使 Chrome 中的 **ALL** 网站拉伸其内容以实际适合屏幕宽度（如：删除所有页面左侧/右侧的所有水平空间）

html - 使 Chrome 中的 **ALL** 网站拉伸其内容以实际适合屏幕宽度（如：删除所有页面左侧/右侧的所有水平空间）

问题描述

问题

这些天我看到很多网站的未使用或空白空间占据了网页水平宽度的 1/3 或更多。

我在寻找什么

我试图弄清楚是否有办法删除或减少网页上未使用的水平空间。发生这种情况的原因有很多，但通常是由于：

  1. 指定max-widthCSS 属性的 HTML 元素。
  2. @media (max-width: <pixel-amount>)查询中引用了 HTML 元素或其类之一。

例子

示例 1

绝对完美的例子是https://stackoverflow.com
这是我看到的更清楚问题的图像： stackoverflow.com 网页

示例 2

这是一个stackoverflow示例，我认为如果我可以阅读/查看更多已接受的答案而不必不断向上/向下滚动，那将非常有帮助。当我以 1920x1080 分辨率全屏显示时，在 Chrome 92 中 100% 缩放时，
页面的主要内容（问题/答案部分）仅占页面宽度的 34% 。
此示例图像中的页面链接 stackoverflow 的问题/答案页面

我试过的

使用 uBlock Origin 浏览器扩展，我可以阻止元素出现在网页上。根据网站 HTML 的结构，这有时会产生预期的效果。可以使用 uBlock Origin 阻止特定元素的 CSS 属性（目前正在尝试弄清楚）。

可能的线索

许多网站（如 stackoverflow 或 stackexchange）的内容宽度似乎在指定的最大宽度媒体查询后停止增加。或者，如果 HTML 元素max-width设置了 CSS 属性。

在 stackoverflow.com 上，如果我删除 class: body>.container max-widthCSS 属性并对 CSS 选择器执行相同的操作：#content这可以解决 stackoverflow 上的问题，但在重新加载页面后更改会被重置。我假设其他站点的解决方案可能与此非常相似，或者需要更改@media (max-width: <pixel-amount>)查询中引用的类。

标签： htmlcssgoogle-chrome-extensionbrowserresponsive-design

解决方案

您可以使用 uBlock Origin 永久修改任何站点的 CCS 属性。

打开 uBlock 的选项并转到过滤器并添加以下内容以使 stackoverflows 内容没有最大宽度：

  • stackoverflow.com##.container:style(max-width: none !important)
  • stackoverflow.com###content:style(max-width: none !important; width: 100% !important) uBlock 中的过滤器选项卡应该是什么样子

不要忘记在 uBlock 中点击 Apply Changes！

除了您可能需要更改站点和类/选择器之外，您将对其他站点执行相同的操作。根据您的浏览器，代码可能会有所不同。

结果

证明stackoverflow内容适合屏幕宽度

推荐阅读