Horizon 主题在中等视口下头部布局混乱

Horizon 的标题栏在大多数情况下,无论是在移动端还是桌面端,表现都非常出色:

不过,我有一部折叠屏手机,其屏幕比例比较特殊。不幸的是,搜索栏和头像会消失,导致整体布局有些混乱:

这似乎发生在宽度为 640–767 像素的范围内——而我的折叠屏手机正好处于这个区间!

我也能复现这个问题——问题似乎出在折叠屏手机/小平板视口尺寸(@media (min-width: 640px) and (max-width: 767px))下,头部内的 contents 类显示了 flex 布局:

可以通过将该范围内的属性改为 contents 来修复:

@media (min-width: 640px) and (max-width: 767.98px) {
  .d-header>wrap .contents {
    display: contents!important;
  }
}

我认为 Discourse 使用 768px 作为平板与桌面端的分界线。

不过,我发现这个设置反而让情况更糟了!关闭它后,除非将设备明确指定为移动设备,否则在 767 像素以下的各种尺寸下,页眉都会乱码。

但至少我的折叠屏手机没问题。只是当内容变小时,我的桌面浏览器就不行了。

我认为该设置现已消失,因此不再存在变通方法。

Horizon 的问题仍然存在。

能否帮我诊断一下这个问题?因为目前我通过桌面端模拟器复现时(我没有折叠屏手机),并没有看到任何异常情况。

我可以通过在桌面上简单地缩小浏览器窗口来复现这个问题:

当窗口足够宽时:

稍微窄一点,就会发生一些奇怪的情况(侧边栏/标题栏变白),我不太确定这是否是有意为之:

再窄一点就凸显了问题(即折叠屏手机的大小)

非常窄(普通手机大小)时又恢复正常了。

确实如此。

我真的看不懂这是什么意思,这是 644px 宽度的效果:

在我这里,无论宽度如何,头像都不会消失。

你能在 Meta(使用 Horizon)上复现这个问题吗?

啊——我忘了我可以那样做来复现问题!不,我在 Meta 上使用 Horizon 也无法复现。

我想这大概是我网站的问题——我去排查一下我这边的情况,然后告诉你结果。谢谢你的调查!!!

哇,发现问题竟然如此简单。

这个主题组件与 Horizon 不兼容:

而且我超爱这个 TC!!我实在受不了移动端菜单跳到右边。正是这些小事让我们抓狂(好吧,只是我们中的一些人),对吧?也许我喜欢它在左边是因为我是左撇子。

是啊,我理解。

欢迎在原始的 Horizon 主题 帖子中留言,我们在那里提到:

我也使用那个组件(我对侧边栏图标的感觉也一样,虽然我不喜欢也不用 Horizon),并且已经对该组件做过一些工作。我会看看能否为它做一个修复,Nathan。

嘿,Nathan,我这里有一个修复方案:

莉莉,你太棒了!我现在正用我的折叠屏手机同时享受左边的汉堡和《地平线》。

太棒了!!!