可折叠手机和像 Surface Duo 这样的双屏设备带来了一个普通响应式设计无法解决的布局问题：浏览器窗口可以跨越两个被铰链或折叠分隔的物理独立显示屏。为一个连续矩形设计的页面，最终可能把内容尴尬地拆分到接缝两侧，或者隐藏在铰链后面。
两项 CSS 功能可以让页面检测到这种情况并做出调整。第一项是一对媒体查询：
@media (horizontal-viewport-segments: 2) { /* held like a book, two screens side by side */ } @media (vertical-viewport-segments: 2) { /* stacked like a laptop, fold horizontal */ }
`horizontal-viewport-segments` 在铰链为垂直方向、两块屏幕并排时匹配该设备；`vertical-viewport-segments` 在铰链为水平方向、屏幕上下堆叠时匹配。该整数值报告该方向上存在的视口数量，因此页面可以精确针对双屏幕姿态。
文章介绍了六个 CSS 环境变量——viewport-segment-width、height、top、left、bottom、right——使布局能够适应每个可折叠型号特定的铰链和屏幕尺寸，而无需硬编码断点。
第二项功能是一组报告每个屏幕分段几何信息的 CSS 环境变量：
env(viewport-segment-width 0 0); env(viewport-segment-height 0 0); env(viewport-segment-top 0 0); env(viewport-segment-left 0 0); env(viewport-segment-bottom 0 0); env(viewport-segment-right 0 0);
这两个坐标对应由分隔各分段的硬件特征所创建的网格，左上角分段为 0,0。由于这些值由设备计算，布局可以适应每个型号特定的屏幕和铰链尺寸，而无需设计者为每台设备单独编写断点。
Stimac 在一个食谱页面上演示了这种方法，该页面在双屏设备上变为双列网格：
@media (horizontal-viewport-segments: 2) { .container { grid-template-columns: env(viewport-segment-width 0 0), 1fr; } }
第一个网格列填满左侧显示屏，第二个占据右侧剩余空间。通过明确命名两个分段宽度，可以更显式地重写同一条规则，使每一列对应一个显示屏。
环境变量还可以让页面在两块屏幕之间刻意放置内容，而不是让内容落到铰链上。在 Smashing Magazine 版本的这项工作中，Stimac 逐步讲解了一个布局，其中早期版本导致文本被设备本身遮挡；重置边距和内边距，然后按分段重新应用，产生了拆分布局，其中没有任何内容被隐藏。
一个相关的问题是交互元素是否会落到接缝上。分段几何信息是可测量的，因此设计者可以将按钮和点击目标排除在铰链区域之外，而不是靠运气——这是一个刻意定位的问题，而不是已解决的硬件问题。
JavaScript 通过 Visual Viewport API 提供了一条并行路径。查询 `window.visualViewport.segments` 会返回每个分段的 DOMRect 数组，或者在单屏布局时返回 `null`——这种刻意的设计可防止代码意外针对单屏设备。返回的值是一个不可变的快照，因此在调整大小或旋转后，页面必须重新查询分段以获取当前状态。
这篇文章提出的实际问题不仅是如何构建这些布局，而且是否值得构建。Stimac 承认这种怀疑态度：许多开发者认为这项努力只是针对一小部分用户。她的反驳基于 2023 年出货超过 2100 万部可折叠设备的预测。这在整体移动市场中显得很小，但仍然是数百万台在用设备——而且她认为，谷歌 Pixel Fold 的到来表明这种形态是持久的，而非实验性的。
她的第二个论点是差异化：适应可折叠设备的网站会做一些竞争对手的标准响应式布局做不到的事情。她建议在投入工程时间之前，先利用客户实际拥有哪些设备的数据，并指出 Surface Duo 其中一个显示窗格中的浏览器已经可以渲染普通的响应式站点——因此双屏模式是一种增强，而不是必需品。
浏览器支持是主要障碍。媒体查询和环境变量在 Microsoft Edge Stable 中都受支持。Chrome Stable 尚未提供这些功能，考虑到 Pixel Fold 随附 Chrome，文章将此称为一个重大缺口。
文章最后指出，没有浏览器和操作系统的支持，公司不太可能投资可折叠体验，因此使能工作必须首先在浏览器中落地。对于想要深入了解的读者，Stimac 对同一食谱演示的更详细论述发表在 Smashing Magazine 上，她建议下载 Edge 进行实验。
这篇文章在一个重要方面存在局限：它是一份操作指南调查和观点表达，而不是对其中任何技术的独立验证。Smashing Magazine 那篇文章由同一位作者撰写，因此反映的是她自己的立场，而非外部佐证。文中未提供的内容包括：现实世界中的性能数据、来自任何发布者的采用数字，或者对可折叠专属布局是否改善用户可衡量结果的任何正式评估。