只靠@media (orientation: portrait/landscape)做横竖屏切换90%会失效，因其仅依赖视口宽高比而非真实设备朝向或物理布局；必须结合visualViewport.width、screen.orientation.type及screen-spanning媒体查询（Chromium 119+支持）交叉验证，方能稳定识别折叠屏铰链状态与真实方向。
直接结论：只靠 @media (orientation: portrait) 或 @media (orientation: landscape) 做横竖屏切换，90% 的场景会失效——尤其在双屏折叠设备上。必须配合 visualViewport.width、screen.orientation.type 和 screen-spanning 媒体查询才能稳定识别真实方向与物理布局状态。
为什么 @media (orientation: ...) 经常不准
这个媒体查询判断的是 CSS 视口的宽高比，不是设备当前真实朝向或可绘制区域。比如：
- 华为 Mate X5 折叠后竖屏，
window.innerWidth可能仍返回 1200px（系统 UI 占位），导致orientation: landscape被误判 - iOS Safari 在折叠动画中间帧里，
matchMedia('(orientation: portrait)')可能连续触发 false/true/false，造成布局抖动 - 某些 Android WebView 不支持 orientation 查询，直接回退到
not all
真正可靠的做法是：用 visualViewport.width 获取实时可视宽度，再结合 screen.orientation.type（如 "portrait-primary"）交叉验证——它来自系统传感器，延迟低、不依赖渲染管线。
screen-spanning 是双屏设备的唯一可信信号
Chromium 119+（Android Chrome / Edge Beta）开始支持该实验性媒体特性，能直接识别铰链状态：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
@media (screen-spanning: single-fold-horizontal)→ 设备已展开、横屏、铰链在上下边（Z Fold 横置） -
@media (screen-spanning: single-fold-vertical)→ 合盖、竖屏、铰链在左右边（Flip 类设备） - 桌面浏览器或旧版引擎中该查询返回
not all，必须用 JS 回退到window.matchMedia监听 + 宽高差值判断
示例：导航栏在展开态铺满双屏，在合盖态收为底部 tab
@media (screen-spanning: single-fold-horizontal) {
.nav-bar { display: flex; width: 100vw; }
}
@media (screen-spanning: single-fold-vertical) {
.nav-bar { position: fixed; bottom: 0; width: 100%; }
}Flex 布局在横竖屏切换时的塌陷风险
很多页面在横屏下导航项突然换行、图标错位，根本原因不是媒体查询没写，而是 Flex 属性配置冲突：
- 默认
flex-shrink: 1会让文字长的菜单项被压缩，横屏下反而更易溢出 - 漏设
flex-wrap: wrap，窄横屏（如 iPad mini 横屏）直接横向滚动 - 用
flex: 0 0 120px固定宽度 → 折叠屏 DPR 高时字体渲染放大，内容撑破容器
安全写法是：
.nav-list {
display: flex;
flex-wrap: wrap;
}
.nav-item {
flex: 1 1 minmax(80px, auto); /* 允许收缩但保最小点击区 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0; /* 关键：防止文本强制撑宽 */
}真机测试时最容易忽略的三个点
模拟器跑通 ≠ 真机可用。以下三点在 Pixel Fold、Mate X6、Surface Duo 3 上反复验证过：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须存在且拼写零误差；缺viewport-fit=cover，折叠态内容会被系统安全区裁切 - 不要监听
resize事件做布局重排——折叠动画期间可能触发 20+ 次，卡顿且不可预测；改用window.matchMedia('(screen-spanning: ...)').addEventListener('change', ...) - CSS 中禁用
white-space: nowrap以外的任何强制单行控制；双屏折叠时行高计算偏差会导致文字截断，必须配min-width: 0+text-overflow: ellipsis
