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

[nathank (Nathan Kershaw)]

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

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

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

[Lilly (Lillian)]

我也能复现这个问题——问题似乎出在折叠屏手机/小平板视口尺寸（@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 作为平板与桌面端的分界线。

[nathank (Nathan Kershaw)]

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

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