问题
现在我发现很多网站的未使用或空白空间占据了网页水平宽度的 1/3 或更多。
我在寻找什么
我试图弄清楚是否有办法删除或减少网页上未使用的水平空间。发生这种情况的原因有很多,但通常是由于:
- 指定
max-width
的 HTML 元素CSS 属性。 @media (max-width: <pixel-amount>)
中引用了 HTML 元素或其类之一。查询。
示例
示例 1
绝对完美的例子是 https://stackoverflow.com
这是我认为更清楚地说明问题的图像:
示例 2
这是一个 stackoverflow 示例,我认为如果我可以阅读/查看更多已接受的答案而不必不断向上/向下滚动,那将非常有帮助。
当我以 1920x1080 分辨率全屏显示时,在 Chrome 92 中以 100% 缩放时,页面的主要内容(问题/答案部分)仅占据页面宽度的 34% 。
Link to page in this example image
我尝试过的
使用 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%!重要)
不要忘记在 uBlock 中点击“应用更改”!
您可以对其他网站执行相同的操作,除非您可能需要更改网站和类别/选择器 根据您的浏览器,代码可能会略有不同。
结果
关于html - 让 Chrome 中的 **所有** 网站拉伸(stretch)其内容以实际适应屏幕宽度(如 : remove all horizontal space on left/right of ALL pages),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68812166/