更改 vdo/vmo 的断点

我们的设计师在这个(非常美观且实用)的附加组件的响应式设计方面遇到了一些问题,她询问是否可以更改当前从 vdo 元素切换到 vmo 元素的断点?

这是否可行?谢谢

好的。只需分叉并编辑主题组件即可。

谢谢,我查看了一下,但没在那里找到……我猜它依赖于某个适用于整个站点(而不仅仅是该菜单)的 Discourse 设置?

不管怎样——我们已通过 CSS 媒体查询实现了该功能。虽然不是最理想的方案,但我们可以接受。

vdo(仅桌面视图)切换到 vmo(仅移动视图)是基于您浏览器中的用户代理(user-agent),而不是基于您使用或模拟的视口宽度。

在 Discourse 中,CSS 媒体查询的重要性不如您在其他网站上所习惯的那样高。

Discourse 会根据用户所使用的设备提供不同的优化标记。

我想表达的是,您无需过多担心 CSS 媒体查询。您的设计师需要在测试的 URL 中添加 ?mobile_view=1,或者在桌面端进行测试/调试时使用移动用户代理。

有意思 :thinking: 感谢您花时间解释。

但当我在桌面上调整浏览器窗口大小时,我看到 Discourse 做出了反应并重新排列了屏幕上的内容。_那_应该不是来自我的用户代理字符串。是否有其他机制会对屏幕尺寸做出反应?

例如:右侧的时间轴滚动条在宽度较小时会消失,并被一个更小的指示器取代,仅显示帖子编号和总数,如 19 / 24

你说得没错。

如果你将窗口缩小到一定程度,Discourse 确实会移动内容。我们这样做是为了适应不同的桌面/笔记本电脑屏幕尺寸。

但这并不是重点。缩小视口不会触发用户代理变更,因为这是完全基于你所使用设备的用户代理的。

如果你在桌面端并更改了窗口/屏幕宽度,Discourse 会尽可能合理地对此进行调整。

不过,如果你想在桌面端测试 Discourse 在移动端的显示效果,你需要:

正如我上面提到的,

或者在移动设备上进行测试。