screen-spanning 媒体特征不存在，horizontal-viewport-segments 和 vertical-viewport-segments 才是 chrome/edge 119+ 支持的唯一稳定折叠态检测方式，分别对应竖折和横折双屏分割；spanning 用于判断元素是否跨铰链渲染，与 viewport 结构无关。
screen-spanning 这个媒体特征根本不存在，浏览器会直接忽略 @media (screen-spanning: single-fold-vertical) 这类写法。你查不到、用不了、DevTools 里也看不到匹配状态——不是你写错了，是它压根没进标准，也没被 Chrome/Edge 正式支持。
horizontal-viewport-segments 和 vertical-viewport-segments 才是真能用的
这两个才是当前（Chrome 119+、Edge 119+）唯一稳定、可上线的折叠态检测方式，专为物理双视口设计：
-
horizontal-viewport-segments: 2→ 表示竖折设备（如 Galaxy Z Fold）展开后，被铰链水平分割成左右两个独立 viewport -
vertical-viewport-segments: 2→ 表示横折设备（如华为 Mate X3）展开后，被铰链垂直分割成上下两个 viewport - 值为
1表示单屏（折叠态或普通手机），只有2才代表真实双列渲染
常见错误现象：
- 写了
@media (min-width: 768px)就以为进了“大屏模式”，结果在 Z Fold 展开态下document.body.clientWidth返回的是 ~390px（单侧宽度），布局全乱 - 把
screen-spanning当成已发布特性，在 Safari 或旧版 Chrome 里调试半天没反应
实操建议：
- 直接用
@media (horizontal-viewport-segments: 2)布局双栏，比如让.sidebar占左列、.editor占右列 - 横折设备必须换用
@media (vertical-viewport-segments: 2)，不能复用同一套规则 - 注意兼容性：Safari 和 Firefox 完全不支持这两个特性，得回退到
matchMedia('(min-width: 720px) and (min-height: 840px)')+screen.orientation组合判断
spanning 媒体特征用来识别跨铰链渲染行为
spanning 不是检测“屏幕是否折叠”，而是回答：“当前这个元素，有没有被强制铺满两个物理屏幕？”
-
@media (spanning: none)→ 元素完整落在单侧 viewport 内（默认） -
@media (spanning: single-fold-horizontal)→ 元素横跨垂直铰链（即从左屏延伸到右屏）
关键影响：
-
position: sticky在spanning: single-fold-horizontal下会失效 -
transform动画可能被截断，合成层压力陡增 - 不要为了“视觉连贯”强行让导航栏跨铰链——性能代价高，且滚动时容易卡顿
实操建议：
- 优先用 Grid 布局分配区域，避免依赖跨铰链渲染
- 如果必须响应跨铰链状态，JS 里要用
window.matchMedia监听变化，并加防抖（折叠过程有中间态，resize 会高频触发） - 别把
spanning和horizontal-viewport-segments混用：前者描述元素渲染位置，后者描述 viewport 物理结构
折叠屏下 viewport 设置和容器查询容易被忽略
很多问题其实不出在媒体查询本身，而在基础配置没跟上物理屏幕变化：
- 折叠屏展开后，系统 WebView 可能仍维持折叠态的
viewport宽度（如width=320），导致 CSS 计算基准错误 -
@container查询在折叠瞬间容易卡在旧尺寸，因为容器没及时重绘
实操建议：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须写，且不能硬编码width=320 - 容器要设
container-type: inline-size，并确保触发 BFC（比如加overflow: hidden或display: flow-root） - 折叠屏测试务必真机验证，DevTools 的 device toolbar 只模拟 viewport 变化，不模拟双视口分割
真正难的不是写对那几行媒体查询，而是理解：折叠屏不是“更大的手机”，而是两个独立 viewport 共存的特殊渲染环境。任何假设“宽度变大就等于进入大屏模式”的思路，都会在 Galaxy Z Fold 或 Pixel Fold 上翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
