Storefront 的屏幕布局由可配置的斷點(configurable breakpoints)驅動。斷點具有可配置的屏幕尺寸（即 < 576px），并且關聯的屏幕名稱可用于進一步定義布局。

一個很好的例子是頁面模板槽配置，它可以根據屏幕名稱進行調整，以便布局因屏幕尺寸而異（即移動與桌面）。

然而，其他功能也可以使用屏幕名稱來進一步增強功能的呈現。一個很好的例子是表格組件，它有一個基于屏幕的可配置標題列表。

屏幕特定 DOM 的創建就是我們所說的自適應設計(adaptive design)。此設計針對小屏幕進行了優化，但也針對可訪問性進行了優化。

這種技術的問題在于它是由窗口寬度驅動的。斷點配置與實際窗口寬度進行比較，并且會在實際窗口發生變化時發生變化。

然而，在 SSR 上，我們沒有窗口。我們無法通過比較窗口大小來找到屏幕。這就是我們目前在 SSR 上使用移動優先(mobile-first )方法的原因。然而，這會導致問題，因為：

• 生成的布局可能無法反映實際的窗口大小
• 生成的內容可能不足以供爬蟲使用

為了解決這個問題，我們需要考慮幾個方面：

我們可以在組合中引入設備檢測。我們只會在 SSR 中執行此操作，并且需要將檢測到的設備類型映射到我們在斷點配置中定義的屏幕.

一旦我們根據設備類型在 SSR 中呈現多個版本，我們應該在 SSR 之上的任何緩存層（主要是 Web 服務器緩存和 CDN）中考慮到這一點。

我們可以通過將設備類型公開為標頭來做到這一點。

目前尚不清楚我們需要為設備公開什么級別的粒度。想到以下幾點：

• mobile
• desktop
• table
• 機器人/爬蟲

總結

以上是生活随笔為你收集整理的关于 SAP Spartacus 服务器端渲染 SSR 无法使用窗口宽度以进行自适应设计的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。