应使用 horizontal-viewport-segments 和 vertical-viewport-segments 媒体查询，screen-spanning 已被 Chromium 标记废弃且未被 Safari、Firefox 实现，任何稳定版浏览器均不支持；horizontal-viewport-segments: 2 是目前唯一稳定识别 Galaxy Z Fold 展开态双视口的方案，需严格写为整数 2 并配降级样式；避免 display: none 影响可访问性，推荐用 flex-basis + min-width + overflow 组合控制；env() 安全区变量须层叠书写并确保 viewport-fit=cover；铰链导致的渲染分裂需用 Grid 显式锚定区域，无法靠媒体查询修复。
直接用 horizontal-viewport-segments 和 vertical-viewport-segments 媒体查询，别碰 screen-spanning——它压根没进标准，Chrome 都已标记废弃。
为什么 screen-spanning 不能用
这个媒体特征在任何稳定版浏览器里都不生效。Chromium 官方文档明确标注为 deprecated，Safari 和 Firefox 从未实现。你写 @media (screen-spanning: single-fold-vertical)，DevTools 根本不匹配，控制台也查不到触发日志——不是你漏了语法，是它根本不存在。
常见错误现象：
- 本地调试时一切正常，真机上完全无反应
- 误以为是 UA 判断问题，疯狂 patch
navigator.userAgent，实际连媒体查询都没跑进去 - 把
screen-spanning和horizontal-viewport-segments混着写，导致整条规则被浏览器静默丢弃
怎么用 horizontal-viewport-segments: 2 精准识别竖折双屏
这是目前唯一能稳定区分 Galaxy Z Fold 展开态（左右双视口）的方案，但必须严格按规范写：
- 值只能是整数
2，不能写>1、=2或带单位 - 不能嵌套：比如
@media (min-width: 720px) and (horizontal-viewport-segments: 2)会被部分浏览器忽略 - 匹配时
document.body.clientWidth返回的是单侧宽度（约 375–420px），不是总宽——别拿它算栅格列数 - 必须配降级样式：默认按单屏写，只在匹配时激活双栏布局，否则旧浏览器直接白屏
接缝处元素错位或截断？别用 display: none
折叠屏用户常依赖屏幕阅读器或键盘导航，display: none 会让元素彻底退出可访问树；width: 0 又会破坏 flex 流计算。更稳的做法是组合控制：
- 用
flex-basis: var(--sidebar-span)控制基础跨度，变量由媒体查询动态设 - 加
min-width: 0允许内容收缩而不撑开容器 - 加
overflow: hidden隐藏溢出，避免视觉错位 - 动画只作用于
flex-basis，不要对变量做calc(var(--sidebar-span) - 80px)运算——Chrome 119+ 在媒体查询切换时不重算该表达式
安全区留白过大？env() 必须层叠写法
env(safe-area-inset-bottom) 在非安全区设备返回 0px，不是未定义，所以不会自动回退。必须靠 CSS 层叠覆盖：
- 先写
padding-bottom: env(safe-area-inset-bottom) - 再写
padding-bottom: 20px（后者会被支持设备忽略） - 确保
已设置，否则env()全部返回0px - 别给
body加padding-bottom——操作条是系统浮层，真正要避开安全区的是滚动容器（如.main-content）
最常被忽略的一点：铰链物理分割带来的不是尺寸变化，而是渲染上下文分裂——position: sticky 在跨铰链时失效，transform 可能被截断，这些都不能靠 media query 修复，得靠 Grid 布局显式声明区域锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
