html - 让 Chrome 中的 **所有** 网站拉伸(stretch)其内容以实际适应屏幕宽度(如 : remove all horizontal space on left/right of ALL pages)

标签 html css google-chrome-extension browser responsive-design

问题

现在我发现很多网站的未使用或空白空间占据了网页水平宽度的 1/3 或更多。

我在寻找什么

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

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

示例

示例 1

绝对完美的例子是 https://stackoverflow.com
这是我认为更清楚地说明问题的图像: stackoverflow.com webpage


示例 2

这是一个 stackoverflow 示例,我认为如果我可以阅读/查看更多已接受的答案而不必不断向上/向下滚动,那将非常有帮助。
当我以 1920x1080 分辨率全屏显示时,在 Chrome 92 中以 100% 缩放时,页面的主要内容(问题/答案部分)仅占据页面宽度的 34%
Link to page in this example image stackoverflow's question/answer page


我尝试过的

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


可能的线索

许多网站(例如 stackoverflow 或 stackexchange)的内容宽度似乎在指定的最大宽度媒体查询后停止增加。或者,如果 HTML 元素具有 max-width CSS 属性集。

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

最佳答案

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

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

  • stackoverflow.com##.container:style(最大宽度:无!重要)
  • stackoverflow.com###content:style(最大宽度:无!重要;宽度:100%!重要) What the filters tab should look like in uBlock

不要忘记在 uBlock 中点击“应用更改”!

您可以对其他网站执行相同的操作,除非您可能需要更改网站和类别/选择器 根据您的浏览器,代码可能会略有不同。

结果

Proof that stackoverflow content fits screen width

关于html - 让 Chrome 中的 **所有** 网站拉伸(stretch)其内容以实际适应屏幕宽度(如 : remove all horizontal space on left/right of ALL pages),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68812166/

相关文章:

html - 为什么这个div这么大?

html - 如何移动单选按钮,下拉选择高几个像素?

javascript - 使用 captureVisibleTab 确定窗口像素密度?

javascript - 在新的 Chrome 窗口中打开多个标签页

javascript - 使用带有 CSS 过渡的 SVG 图像调整 div 的大小会导致 Firefox 中出现奇怪的交叉线

html - 将 Logo 与文本放在同一行+能够调整 Bootstrap 的大小?

html - CSS 显示所有 child

javascript - 如何减少 JavaScript 触摸输入的触摸延迟?

css - 我如何通过关于 :first-of-type 的纯 css 实现它

google-chrome - W3C 地理定位返回缓存坐标