长Logo导致手机卡在桌面视图

支持
1

这或许被视为一个漏洞，但我不太确定。

我有一位用户在移动设备上被困在了桌面视图（他为何点击桌面视图，无人知晓），因为我们的长 Logo 将汉堡菜单挤出了屏幕。我在 Meta 上无法复现此问题，因为即使在桌面视图中，Logo 也能完美适配。

我可以告诉他通过更改 URL 来退出桌面视图，但在 Discourse 应用中这不可行。我可以暂时隐藏 Logo，以便他能切换回来，但尽管这是一个边缘情况，如果能有一个长期的实际解决方案那就更好了。

我尝试禁用了所有主题组件和插件，但仍能复现此问题。

image
image1104×1574 287 KB

2

您可以将链接 Nature Photographers Network 添加到“社区”下拉菜单中（以返回移动视图）。

您可以通过主题组件从汉堡菜单中移除“桌面视图”选项。

我在想，如果先从 Discourse 应用中移除论坛，然后再重新添加，是否能解决当前的问题。

3

是的，我同意，这需要在核心代码中进行修复。我认为最好的解决方案是在桌面布局下，针对小窗口尺寸（小于 768px）强制设置标志的最大宽度。

此外，复现此问题的最简单方法是使用浏览器的响应式设计模式，但不要使用移动用户代理。这将加载桌面站点，然后你可以将窗口大小调整为小尺寸。（下方示例来自 Safari。）

image
image1580×2012 324 KB

4

谢谢 Penar，这给了我一个灵感：在桌面端视图中，当宽度低于 768px 时，将标志替换为移动端标志。类似的功能可能应该被纳入核心。谢谢！

@media only screen and (max-width: 768px) {
  body {
    .d-header #site-logo {
       content:url("https://images.naturephotographers.network/original/2X/4/45d1b54bc00a5a737fae7dfe3d79b8d8dfd71729.png");
    }
  }
}