horizontal-viewport-segments: 2 是唯一可靠识别Z Fold展开态的媒体特性，它明确表示左右两个物理视口已就绪；必须单独使用并用@supports包裹，否则Safari/Firefox等浏览器会静默忽略。
horizontal-viewport-segments: 2 是唯一能识别 Z Fold 展开态的媒体特性
它不是“宽屏判断”，而是浏览器明确告诉你：“当前左右两个物理视口已就绪”。window.innerWidth 或 @media (min-width: 720px) 在 Z Fold 展开时返回约 375–420px（单侧宽度），根本不是总宽，布局会错乱。只有 horizontal-viewport-segments: 2 能触发双栏逻辑。
常见错误现象：
-
@media (horizontal-viewport-segments > 1)写法无效 —— 值必须是整数2，不能带比较符或单位 - 嵌套在其他查询里，比如
@media (min-width: 768px) and (horizontal-viewport-segments: 2)，部分浏览器直接丢弃整条规则 - 没加
@supports，Safari/Firefox 和旧版 Chrome 会静默跳过，样式完全不生效
实操建议：
- 单独使用：
@media (horizontal-viewport-segments: 2)，不要拼接其他条件 - 必须搭配
@supports (horizontal-viewport-segments: 2)包裹整个块，确保降级安全 - 匹配时
document.body.clientWidth返回单侧宽度（如375px），别用它算“总宽”；双栏布局应基于grid-template-columns: 1fr 1fr或固定列宽
vertical-viewport-segments: 2 专用于翻盖式设备如 Pocket
这不是 orientation: portrait 的替代品，而是物理铰链水平切割屏幕后的信号：上下两个独立视口已激活。华为 Pocket、Galaxy Z Flip 展开后才匹配，此时高度被分割，height 相关布局才有意义。
常见误用：
- 混用
screen-spanning: single-fold-vertical—— 这个特性已被 Chromium 废弃，DevTools 里根本看不到匹配状态 - 对 Z Fold 写
vertical-viewport-segments: 2—— 它只响应水平铰链，竖折设备永远不匹配 - 写成
vertical-viewport-segments: 1或3—— 合法值只有1（单屏）和2（双段）
典型布局：
- 顶部工具栏设为
height: 50vh，底部内容区同理，避免依赖父容器高度 - 慎用
height: 50%—— 父级可能未定义高度，导致计算为0 - 与
horizontal-viewport-segments规则分开维护，不要共用同一组 CSS 变量
@supports 必须包裹，否则降级失效
Chrome/Edge 119+ 支持 horizontal-viewport-segments 和 vertical-viewport-segments，但 Safari 和 Firefox 当前完全不支持。不加 @supports，整条规则会被忽略，连 fallback 都没机会执行。
实操建议：
- 写法必须是
@supports (horizontal-viewport-segments: 2)，括号内不能省略冒号和值 - 降级方案要显式提供，例如默认单栏布局，仅在
@supports块内激活双栏类名或变量 - 变量透传推荐统一用
--fold-state，值设为single/horizontal/vertical，并在 :root 中预设默认值，防止var(--fold-state)退化为空字符串
JS 监听必须防抖且读 visualViewport.width
CSS 媒体查询只响应静态状态，但折叠过程有半开、动画帧、系统延迟上报等中间态。matchMedia 会频繁触发 false positive，不处理 UI 会疯狂抖动。直接监听 window.onresize 更糟 —— Pixel Fold 上常只触发 1 次。
正确做法：
- 用
matchMedia('(horizontal-viewport-segments: 2)')创建监听器，而不是resize事件 - 回调中必须加防抖（建议
300ms），Z Fold 展开瞬间可能触发 4–6 次 change 事件 - 读取宽度要用
visualViewport.width而非window.innerWidth—— 后者在动画中不稳定，前者反映当前渲染视口真实尺寸 - 监听必须在脚本加载时立即执行，不能等
DOMContentLoaded—— 折叠状态可能在 DOM 构建前就已变化
最易被忽略的一点：这些媒体特性描述的是“物理视口是否被铰链切开”，不是“用户是否横屏”或“窗口够不够大”。一旦把它们当成普通响应式条件去拼接、嵌套或降级为宽高判断，就等于放弃了形态感知的核心能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
