screen-spanning 不是标准 CSS 媒体特性，目前不存在；Chrome/Edge 119+ 正式支持的是 horizontal-viewport-segments 和 vertical-viewport-segments，用于检测折叠屏双视口状态，配合 spanning 特征识别跨铰链渲染行为。
screen-spanning 不是标准 CSS 媒体特性，目前（2026 年 5 月）根本不存在 —— 你查到的 screen-spanning: single-fold-vertical 是误传或混淆了 Chromium 实验性前缀、旧草案名或拼写错误。
为什么 screen-spanning 查不到、用不了
Chrome/Edge 119+ 确实新增了折叠屏感知能力，但正式支持的是 horizontal-viewport-segments 和 vertical-viewport-segments，不是 screen-spanning。这个错误名称可能源于：
- 把
spanning（CSS 新增的媒体特征，用于检测元素是否跨铰链渲染）和screen错误拼接 - 将早期 Chromium 内部实验标记（如
screen-fold）误当作已发布特性 - 文档翻译或博客转述时的笔误，且未被及时纠正
直接在 CSS 中写 @media (screen-spanning: single-fold-vertical) 会被浏览器完全忽略，DevTools 里也看不到匹配状态。
真正可用的折叠态检测：用 horizontal-viewport-segments 和 vertical-viewport-segments
这两个才是当前唯一稳定、可部署的原生折叠检测方式，专为物理双视口设计：
立即学习“前端免费学习笔记（深入）”；
-
horizontal-viewport-segments: 2→ 表示设备竖折（书本式），展开后被铰链水平分割成左右两个独立 viewport（如 Galaxy Z Fold） -
vertical-viewport-segments: 2→ 表示设备横折（盖子式），展开后被铰链垂直分割成上下两个 viewport（如华为 Mate X3 展开态） - 值为
1表示单屏状态（折叠态或非折叠设备），2才代表真实双列渲染 - 注意：
document.body.clientWidth在horizontal-viewport-segments: 2下返回的是单侧宽度（约 375–420px），不是总宽
示例写法：
@media (horizontal-viewport-segments: 2) {
.editor { grid-column: 2; }
.sidebar { grid-column: 1; }
}
必须配合 spanning 特征识别跨铰链行为
仅靠 horizontal-viewport-segments 只能知道“屏幕分开了”，但不知道“我的导航栏有没有被强制铺满两块屏”。这时要用 spanning 媒体特征：
-
@media (spanning: none)→ 元素完整落在单侧视口内（默认） -
@media (spanning: single-fold-horizontal)→ 元素横跨垂直铰链（即从左屏延伸到右屏） - 关键影响：
position: sticky在spanning: single-fold-horizontal下会失效；transform可能被截断；动画合成层压力陡增 - 别主动给导航加
spanning: single-fold-horizontal—— 浏览器只在布局无法避免跨屏时才触发它，强行指定反而引发卡顿
兼容性与降级方案不能省
截至 2026 年 5 月，horizontal-viewport-segments 和 spanning 仅 Chromium 119+（Chrome/Edge）支持，Safari 和 Firefox 完全不识别。降级必须做：
- 优先用
@media (width 捕获折叠态（Z Fold 折叠后宽度 ≈ 280–360px） - 展开态用组合判断：
@media (min-width: 720px) and (min-height: 840px)，排除平板干扰 - 避免依赖
orientation—— Z Fold 横向展开后仍是portrait方向 - JS 侧监听必须用
matchMedia+ change 事件，且加防抖；不能只靠resize
最易被忽略的一点：Grid 布局是唯一能稳定响应 horizontal-viewport-segments 的方案。Flexbox 在双视口下会因主轴连续性导致模块错位，而 Grid 的 grid-template-areas 能显式声明“展开时左大纲、右编辑区”，无需改 DOM。
