随着 Google Pixel Fold 等折叠屏设备的日益普及,Web 开发者可以利用特定的 CSS 特性来打造自适应的用户体验。
为了针对折叠屏形态优化布局,开发者可以使用两个主要的媒体查询:用于“书本”模式(左右分屏)的 `horizontal-viewport-segments`,以及用于“笔记本”模式(上下堆叠)的 `vertical-viewport-segments`。这些查询允许应用检测屏幕是否跨越了铰链。
此外,CSS 环境变量(如 `env(viewport-segment-width <x> <y>)`)可以提供每个显示区域的精确几何数据。通过将这些变量与 CSS Grid 集成,开发者可以动态调整内容大小以填充特定屏幕,而无需为每种设备硬编码尺寸。
尽管 Microsoft Edge 目前对双屏的支持较为完善,但在 Chrome 中仍受到限制,需要开启实验性功能标志。虽然并非每个应用都需要折叠屏专用布局,但整合这些特性可以让开发者为数百万采用折叠屏技术的用户提供优质且具差异化的体验。通过使用数据驱动的洞察来评估用户硬件,设计师可以决定对双屏功能的投入是否符合其产品目标。