Storefront 的屏幕布局由可配置的断点(configurable breakpoints)驱动。断点具有可配置的屏幕尺寸（即 < 576px），并且关联的屏幕名称可用于进一步定义布局。

一个很好的例子是页面模板槽配置，它可以根据屏幕名称进行调整，以便布局因屏幕尺寸而异（即移动与桌面）。

然而，其他功能也可以使用屏幕名称来进一步增强功能的呈现。一个很好的例子是表格组件，它有一个基于屏幕的可配置标题列表。

屏幕特定 DOM 的创建就是我们所说的自适应设计(adaptive design)。此设计针对小屏幕进行了优化，但也针对可访问性进行了优化。

这种技术的问题在于它是由窗口宽度驱动的。断点配置与实际窗口宽度进行比较，并且会在实际窗口发生变化时发生变化。

然而，在 SSR 上，我们没有窗口。我们无法通过比较窗口大小来找到屏幕。这就是我们目前在 SSR 上使用移动优先(mobile-first )方法的原因。然而，这会导致问题，因为：

生成的布局可能无法反映实际的窗口大小

生成的内容可能不足以供爬虫使用

为了解决这个问题，我们需要考虑几个方面：

我们可以在组合中引入设备检测。我们只会在 SSR 中执行此操作，并且需要将检测到的设备类型映射到我们在断点配置中定义的屏幕.

一旦我们根据设备类型在 SSR 中呈现多个版本，我们应该在 SSR 之上的任何缓存层（主要是 Web 服务器缓存和 CDN）中考虑到这一点。

我们可以通过将设备类型公开为标头来做到这一点。

目前尚不清楚我们需要为设备公开什么级别的粒度。想到以下几点：

mobile

desktop

table

机器人/爬虫