☰

我可以从浏览器恢复多少垂直空间？

tag-icon • tag-icon browser usability
我可以从浏览器恢复多少垂直空间？

我试图在浏览网页时最大化可用的屏幕区域。

假设我正在研究一些东西，我想打开并查看尽可能多的页面和尽可能多的内容。

我可以根据需要水平平铺窗口，但垂直空间有点棘手。

以 Chrome 为例：
Chrome 的...chrome

现在，隐藏书签栏很容易。但是地址栏和标签栏怎么办？有什么办法吗？也许其他浏览器可以隐藏标签栏和地址栏，即使 Chrome 不能？

网页本身也遭到了修改。

例如，我尝试隐藏滚动条，同时保留滚动功能：（
body::-webkit-scrollbar { width: 0 !important }或 Firefox 的等效功能）

然而，令人沮丧的是，水平滚动条后面仍然有一个黑条，它不属于我能找到的任何可设置样式的元素。

我们能达到多小的程度？

到目前为止，我想到最好的想法是创建一个自定义网页，其中包含多个可以置于全屏模式的平铺 iframe，但我实际上从未使用过 iframe，而且我不喜欢这种方法可能带来的痛苦。

答案1

我使用 Firefox树形标签附加组件。这允许您以树形结构排列选项卡 - 非常适合组织研究和工作单，这也是我最初听说树形选项卡的地方 - 并且在 Firefox 中，您可以全屏显示（F11）同时保持侧面的选项卡栏可见（您也可以通过 切换F1）。

话虽如此，使用树形标签有效地涉及设置about:config选项和创建自定义userChrome.css。因此我将介绍以下步骤。

零

您需要安装 Firefox，因为树形标签页仅适用于 Firefox。然后，您需要安装树形标签添加在。

第一的

about:config您要启用的选项是：

toolkit.legacyUserProfileCustomizations.stylesheets

在此处输入图片描述

默认为false。切换为true。

第二

然后，您可以chrome/userChrome.css在您的根配置文件目录。访问about:profiles并列出顶部的配置文件应该是正在使用的配置文件。它应该向您显示根目录的路径：

在此处输入图片描述

打开该目录。您可能需要创建chrome目录。然后，在chrome目录中添加一个userChrome.css文件。我的如下：

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Hide horizontal tab toolbar */
#TabsToolbar {
    visibility:collapse!important;
}

/* Hide "Tree Style Tabs" sidebar header */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display:none;
}

切换该about:config条目并创建userChrome.css文件后，关闭浏览器并重新打开。请注意，选项卡现在位于左侧，并且您可以通过多种选项打开新选项卡，无论是现有选项卡的子选项卡还是同级选项卡。

演示

无论我如何尝试，我都无法获得 2 MiB 以下的有用 GIF 来在 SuperUser 中本地演示此操作。所以...您可以在 imgur 上看到一个演示：

https://i.stack.imgur.com/rePdF.jpg

无需全屏即可获得更多垂直空间

我注意到你的一条评论想要删除导航栏，并且不想使用全屏功能。我发现这，除非您将鼠标悬停在该区域上，否则导航栏会隐藏。这是userChrome.css您可以进行的另一项调整：

/* Hide nav bar entirely unless moused over */
#nav-bar {
  /* customize this value. */
  --navbar-margin: -44px;

  margin-top: var(--navbar-margin);
  margin-bottom: 0;
  z-index: -100;
  transition: all 0.3s ease !important;
  opacity: 0;
  background-color: rgba(0,0,0,0.8) !important;
}

#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
  margin-top: 0;
  margin-bottom: var(--navbar-margin);
  z-index: 100;
  opacity: 1;
}

在这之间，删除书签栏，并使用 F1 隐藏树形样式选项卡，您可以在不全屏的情况下将占用的空间降至非常小：

在此处输入图片描述

请注意，唯一占用的垂直空间是Menu Bar。选择“隐藏”它并不能完全消除它，只是会缩小一点。

相关内容