折叠屏适配关键在viewport设置（需含viewport-fit=cover）和CSS媒体查询，优先用min-width与aspect-ratio组合判断展开/折叠态，避免依赖resize事件和固定像素断点，禁用transform:scale()，并注意初始化时机与尺寸缓存问题。
折叠屏设备的 viewport 与 CSS 媒体查询怎么写
HTML5 本身不直接“适配”折叠屏，关键在 viewport 设置和 CSS 媒体查询如何响应屏幕形态变化。折叠屏（如 Samsung Galaxy Z Fold/Flip、华为 Mate X 系列）在展开/折叠时会触发 window.innerWidth、window.innerHeight 变化，但更可靠的是使用 screen.width 和 screen.height 配合 @media (display-mode: standalone) 或 @media (dynamic-range: high) 等新特性——不过目前主流适配仍依赖 width、height 和 aspect-ratio。
必须加这行 ，否则折叠后页面可能被裁切或缩放异常；viewport-fit=cover 是让内容真正撑满折叠态下的全屏区域（尤其对刘海+折痕区有效）。
- 不要只监听
resize，折叠动画过程中innerWidth可能抖动，建议配合screen.orientation的change事件做二次校验 - 避免用固定
px值写断点，优先用min-width+aspect-ratio组合，例如：@media (min-width: 600px) and (aspect-ratio: 21/9)匹配展开态超宽屏 - 折叠态下部分浏览器（如 Android Chrome 115+）会把
screen.width报为折叠前的值，需用visualViewport.width辅助判断
怎么检测当前是折叠态还是展开态
没有统一 API 能直接返回“是否折叠”，只能靠组合判断。最实用的是监听 screen.orientation.type 和窗口尺寸比，再结合 matchMedia 查当前媒体查询匹配状态。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const isUnfolded = () => {
const w = Math.min(screen.width, screen.height);
const h = Math.max(screen.width, screen.height);
return h / w > 2.0 && screen.orientation.type.includes('landscape');
};
注意：不同厂商对 screen.orientation.type 的上报策略不同——Z Fold 在展开时可能报 landscape-primary，而 Flip 折叠时也可能报 portrait-secondary，不能单靠字符串匹配。
- 优先用
matchMedia('(min-aspect-ratio: 20/9)')判断超宽屏，比硬编码像素更健壮 - Android WebView 中
screen.orientation可能不可用，需 fallback 到window.matchMedia+ 定时轮询innerWidth/innerHeight - 某些折叠屏在 hinge 区域存在“不可绘制区”，CSS 中可用
env(safe-area-inset-left)和env(safe-area-inset-right)避开（但 hinge 区无对应 env 变量，需 JS 计算）
折叠屏下 CSS 容器查询（@container）有用吗
没用。容器查询依赖父容器尺寸，而折叠屏的布局变化来自视口级重排，不是某个组件内部尺寸变化。目前所有主流折叠屏适配都基于视口媒体查询，@container 对折叠行为零响应。
真正有用的仍是 @media + JavaScript 协同：
-
@media (width >= 720px)适合区分折叠/展开宽度阈值，但需测试具体设备（Z Fold3 展开态screen.width是 1812px，但可交互宽度约 1700px） - 避免用
max-device-width，它在现代浏览器中已被弃用且不反映折叠态真实值 - 如果用 Web App Manifest，确保
display: "standalone"，否则某些折叠动画下 viewport 行为异常
Web 应用在折叠屏上白屏或布局错乱的常见原因
多数问题出在初始化时机和尺寸缓存上。比如在 DOMContentLoaded 时读取 innerWidth，但此时折叠动画尚未完成，拿到的是中间过渡值；又或者用 localStorage 缓存了上次尺寸，导致展开后仍按折叠态渲染。
- 所有尺寸相关逻辑应延迟到
load事件后 +setTimeout(..., 100)，避开折叠动画帧 - 禁用
transform: scale()类强制缩放，它会破坏折叠态下visualViewport的坐标映射 - 使用
ResizeObserver监听document.documentElement比监听window更稳定，尤其在 PWA 模式下
铰链区域没有标准 API 暴露，目前只能通过设备 UA 字符串粗略识别（如含 SM-F926U 或 HUAWEI Mate X2），再硬编码安全间距。这点容易被忽略，但直接影响用户在 hinge 附近点击的体验。
