可折叠屏手机适配需识别设备形态变化、动态分配内容区域并摒弃固定断点思维；应使用 horizontal-/vertical-viewport-segments 媒体特性判断分屏状态，结合 screen.orientation 和 visualViewport 监听变化，采用容器查询与自适应流式布局，避免绝对定位溢出、误用 vh 单位及弹窗跨屏等问题。
可折叠屏手机的适配不是简单加个媒体查询就能解决，关键在于识别设备形态变化、合理分配内容区域，并避免固定断点思维。
识别折叠状态与屏幕分区
现代浏览器通过 CSS @media (prefers-reduced-transparency) 并不适用，真正有效的是 @media (display-mode: standalone) 或更直接的 @media (horizontal-viewport-segments: 2) —— 这是 Chrome/Edge 等基于 Chromium 的浏览器支持的折叠屏专用媒体特性。它能检测当前是否处于双屏展开状态（如三星 Galaxy Z Fold 系列展开后被系统识别为两个水平视口段）。
实际建议：
- 用 horizontal-viewport-segments 和 vertical-viewport-segments 判断当前是单屏（值为 1）还是双屏/三屏（值 ≥2）
- 搭配 JavaScript 监听 screen.orientation 和 visualViewport 尺寸变化，捕捉折叠/展开瞬态
- 避免只依赖
width媒体查询，因为折叠屏在“书本模式”下可能报告接近平板的宽度，但实际可用宽度仅一半
布局策略：从“响应式”升级到“自适应流式”
传统响应式靠断点切换 layout，而折叠屏需要根据物理屏幕分割动态重组 UI 流。比如邮件应用在单屏显示列表，在双屏展开时可左列表右详情——这不是靠 flex-wrap 实现，而是靠 CSS Container Queries 或显式 DOM 区域控制。
实用做法：
- 将主内容区（如侧边栏+主内容）封装为独立容器，用
container-type: inline-size配合@container查询其实际渲染宽度 - 对关键组件（如导航栏、工具栏）添加
position: sticky或position: fixed，防止在分屏滚动时错位 - 禁用
user-scalable=no，允许用户在折叠/展开后手动缩放调整，尤其对阅读类页面很重要
避免常见陷阱
很多页面在折叠屏上看似正常，实则存在隐藏问题：比如弹窗遮挡半边屏幕、输入框唤起键盘后视口计算错误、或 CSS Grid 跨越了物理分割线导致渲染异常。
必须检查：
- 所有
position: absolute/fixed元素是否设置了inset或max-width限制，防止溢出单个屏幕区域 - 使用
min-height: 100dvh替代100vh，避免折叠状态下因地址栏/系统UI导致高度误判 - 测试 Web App Manifest 中
display: "standalone"是否与折叠逻辑冲突（某些系统会在双屏时降级为 browser tab 模式）
渐进增强：先保单屏，再优双屏
不必为尚未普及的三折/卷轴屏提前重构。优先确保基础页面在单屏模式下完全可用，再通过 @media (horizontal-viewport-segments: 2) 加载增强样式或 JS 模块。
例如：
- 默认隐藏二级导航，展开双屏后用 JS 显示并绑定 drag-to-resize 功能
- 图片懒加载逻辑中加入
IntersectionObserver的rootMargin动态适配（双屏时设为"0px 50% 0px 0px"表示只在右屏触发） - 表单验证提示尽量用 inline 方式，避免
tooltips出现在另一物理屏幕上
