Horizon 的标题栏在大多数情况下,无论是在移动端还是桌面端,表现都非常出色:
不过,我有一部折叠屏手机,其屏幕比例比较特殊。不幸的是,搜索栏和头像会消失,导致整体布局有些混乱:
这似乎发生在宽度为 640–767 像素的范围内——而我的折叠屏手机正好处于这个区间!
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 的问题仍然存在。
能否帮我诊断一下这个问题?因为目前我通过桌面端模拟器复现时(我没有折叠屏手机),并没有看到任何异常情况。
啊——我忘了我可以那样做来复现问题!不,我在 Meta 上使用 Horizon 也无法复现。
我想这大概是我网站的问题——我去排查一下我这边的情况,然后告诉你结果。谢谢你的调查!!!
哇,发现问题竟然如此简单。
这个主题组件与 Horizon 不兼容:
而且我超爱这个 TC!!我实在受不了移动端菜单跳到右边。正是这些小事让我们抓狂(好吧,只是我们中的一些人),对吧?也许我喜欢它在左边是因为我是左撇子。
是啊,我理解。
欢迎在原始的 Horizon 主题 帖子中留言,我们在那里提到:
我也使用那个组件(我对侧边栏图标的感觉也一样,虽然我不喜欢也不用 Horizon),并且已经对该组件做过一些工作。我会看看能否为它做一个修复,Nathan。
嘿,Nathan,我这里有一个修复方案:
莉莉,你太棒了!我现在正用我的折叠屏手机同时享受左边的汉堡和《地平线》。
太棒了!!!