应按实际视口尺寸分层响应折叠屏：优先用min-width≥1000px且min-height≥1800px组合判断展开态，辅以aspect-ratio或visualviewport实时监听，弃用orientation。
折叠屏手机展开后视口尺寸不规则（比如 2152×1840、2792×2024 等），且横竖方向可能颠倒，单纯靠 min-width 或 orientation 容易误判。关键不是“识别折叠屏”，而是**按实际可用视口逻辑分层响应**。
用 width 和 height 组合判断真实布局空间
展开态常见特点是：宽度显著大于常规手机（常 >1000px），且高度也大幅增加（常 >1800px），但比例接近 12:9 或 18:14，而非标准 16:9。建议用范围组合代替单一阈值：
-
@media (min-width: 1000px) and (min-height: 1800px)—— 覆盖主流展开态（如 Pixel Fold、Galaxy Z Fold 系列） - 避免只写
min-width: 1200px，因部分设备展开后宽度仅约 1150px（如 Honor Magic V2） - 若需区分“窄展开”（单侧屏幕未完全激活）和“全展开”，可叠加
aspect-ratio：@media (min-width: 1000px) and (min-height: 1800px) and (aspect-ratio >= 1.2)
监听 resize 并读取 visualViewport 动态适配
折叠过程中视口会突变，CSS 媒体查询有延迟或遗漏。JavaScript 补位更可靠：
- 用
visualViewport.width和visualViewport.height获取实时像素尺寸（比window.innerWidth更准，尤其在缩放/地址栏收起时） - 监听
visualviewport.resize事件，在折叠/展开瞬间重新计算布局模式 - 示例逻辑：
if (visualViewport.width > 1000 && visualViewport.height > 1800) {<br> document.body.classList.add('folded-expanded');<br>} else {<br> document.body.classList.remove('folded-expanded');<br>}
再配合 CSS 类做精细样式控制
利用 screen-spanning（实验性，但渐进增强友好）
Chrome 119+ 支持 screen-spanning 媒体功能，专为折叠屏设计：
-
@media (screen-spanning: single-fold-horizontal)—— 检测横向折叠（展开后两屏并列） -
@media (screen-spanning: single-fold-vertical)—— 检测纵向折叠（展开后上下拼接） - 注意：需搭配
display: span的 CSS 属性使用（目前仅 Chrome 支持），适合做内容跨屏延展，非通用布局切换 - 建议作为增强层，主逻辑仍用宽高组合兜底
避开 orientation 的坑
展开后系统可能仍上报 orientation: portrait（因逻辑主轴未变），导致 @media (orientation: landscape) 不触发。应：
- 弃用
orientation做折叠态判断依据 - 改用
min-aspect-ratio或直接比较width与height大小：@media (min-width: 1000px) and (min-height: 1800px) and (min-width: min-height) - 若需横屏专属样式，用
(width > height)替代(orientation: landscape)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
