移动设备上仍然需要取消自动边距吗？

用户体验
1

在移动设备上，main-outlet 包装器的自动边距在此处被取消设置：

这会导致当主题上声明了 -d-max-width 时，布局会左对齐。在较窄的设备上看不到这个问题，但在平板电脑横屏模式下会是一个问题，例如在此处使用 Air 主题时：

The image is a screenshot of a Discourse forum page displaying a welcome message and a list of community posts. (Captioned by AI)
The image is a screenshot of a Discourse forum page displaying a welcome message and a list of community posts. (Captioned by AI)1746×1257 271 KB

我看到该声明是由于 FIX: auto margins cause too-narrow content by awesomerobot · Pull Request #16725 · discourse/discourse · GitHub 添加的。

我现在通常在主题列表中看不到这个问题，也许可以删除该声明？或者，如果存在一些特定情况，是否可以为其分配一个断点？

3 个赞
2

我认为我们可以取消这条规则。它可能会导致某些主题（尤其是自定义主题）在移动设备上出现大边距，但大多数主题应该没问题。

但请注意，您在平板电脑上看到的是移动视图，这不再是 iPad 的默认设置，iPad 默认显示桌面视图，因此它们不会加载移动样式表。这是 Android 平板电脑吗？

3 个赞
3

是的，那是一台 Android 平板电脑。

2 个赞
4

我倾向于认为，在平板电脑横屏模式下（甚至竖屏模式下也是如此），浏览器默认使用移动用户代理是_错误_的选择。不确定这是 Chrome 还是其他浏览器，Chrome 在某些情况下会默认使用桌面模式：Chrome enables desktop mode by default on premium tablets  |  Blog  |  Chrome for Developers

1 个赞
5

我可以在iPad和安卓平板上重现此问题，尽管由于宽高比的原因，在安卓上问题更严重：

The image shows a screenshot of the Discourse website with a welcome message and job listings section. (Captioned by AI)
The image shows a screenshot of the Discourse website with a welcome message and job listings section. (Captioned by AI)1920×1200 208 KB

编辑：这个问题实际上在iPad上不会发生，我试过了，看起来没问题

2 个赞
6

我喜欢移动设备设置的一点是，侧边栏菜单会作为覆盖层滑入，而不是嵌入到页面中。对我来说，这在移动设备上感觉更“原生”。

为什么不直接添加一个断点声明呢？

@include breakpoint(mobile-extra-large) {
  #main-outlet-wrapper {
    margin-left: unset;
    margin-right: unset;
  }
}

这样，在狭窄的移动设备上会移除潜在的额外空间，而较宽的设备则会将包装器居中。

3 个赞
7

breakpoint(mobile-extra-large) 选项对我来说很有意义。也很好奇 @awesomerobot 在此有何看法。

2 个赞
8

我尝试了几个非常自定义的主题，我认为我们已经完全不需要它了……在添加它几个月后，包装器被设置为 grid，width: 100%;，所以理论上这应该可以完全防止最初的问题发生。

正在此处移除

感谢您的调查！

5 个赞