折叠屏HTML多视口布局需区分物理分割与逻辑可视区域，优先用visualViewport.width实时获取真实宽度，配合@container查询、禁用硬编码尺寸、正确配置viewport-fit=cover，并通过多API交叉验证中间态。
折叠屏手机的 HTML 多视口布局不能靠一套 @media 规则打天下，必须区分「物理屏幕分割」和「逻辑可视区域」，否则在 Galaxy Z Fold 展开一半、Pixel Fold 悬停、Mate X5 半折时，页面会卡在错误状态——比如导航栏强行横排却只显示半截，或卡片网格错位堆叠。
用 visualViewport.width 替代 window.innerWidth 获取真实可视宽度
折叠动画过程中，window.innerWidth 常滞后 1–2 帧甚至不更新（尤其 Android WebView），而 visualViewport.width 在 Chrome 61+ / Edge 79+ 中能实时反映用户当前看到的像素宽度，包括半折叠过渡态。
- 直接读取
visualViewport.width，不要缓存它——每次 resize 或 orientationchange 后都重新取值 - 兼容处理：Safari 尚未支持
visualViewport，需 fallback 到window.innerWidth+screen.orientation.angle组合判断 - 别在
DOMContentLoaded里一次性取值：折叠态可能在加载后才触发，必须监听visualViewport.onresize
@container 查询比 @media 更适合折叠态组件级响应
传统 @media (min-width: 900px) 在折叠屏上失效，因为内屏展开后宽度达 1440px，但铰链阴影和系统 UI 占用实际可用宽度仅约 580px（Z Fold）或 620px（Pixel Fold）。此时容器本身宽度才是真实约束条件。
- 给关键模块（如侧边栏、卡片列表）加
container-type: inline-size - 用
@container (min-width: 500px)控制布局切换，而非 viewport 宽度 - 避免同时用
@media和@container套嵌同一元素——浏览器解析顺序不可控，易导致样式竞争 - 注意：Firefox 119+ 才开始支持
@container，生产环境需加 JS fallback（如监听ResizeObserver）
折叠态下禁用 transform: scale() 和固定 flex-basis
很多页面在折叠后文字被压缩、按钮点不中，根源是用了 transform: scale(0.8) 或 flex: 0 0 120px 这类硬编码尺寸。折叠屏 DPR 高（Z Fold 内屏常为 3.5x）、字体渲染逻辑特殊，缩放会放大错位误差。
立即学习“前端免费学习笔记（深入）”；
- 导航项改用
flex: 1 1 minmax(72px, auto)，保证最小触控区且可弹性收缩 - 图标+文字组合用
display: inline-flex; align-items: center;，不用 float 或绝对定位 - 所有
transform相关动画（含scale、translateX）必须包裹在@supports (display: container)或 JS 运行时检测中 - 禁用
white-space: nowrap，改用text-overflow: ellipsis+min-width: 0防止文本撑爆容器
viewport-fit=cover 必须写在 <head> 最顶部，且不能与 maximum-scale 共存
没加 viewport-fit=cover 的页面，在折叠态下会被系统 UI（状态栏、铰链阴影）裁切；加了但位置错或参数冲突，会导致首次渲染白屏或字体跳变。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须是<head>第一个标签，早于所有<link>和<style> - 删掉
maximum-scale=1和user-scalable=no—— 折叠屏用户常需双指缩放查看 hinge 区域内容，WCAG 要求必须支持 - 不要用 JS 动态插入 viewport meta：iOS Safari 会忽略，只认初始 HTML 解析结果
真正麻烦的不是展开态适配，而是半折叠、悬停、单侧激活这些中间态——它们没有统一 API 描述，只能靠 visualViewport + screen.orientation + window.matchMedia 三者交叉验证，且每种厂商实现细节不同。Pixel Fold 的 dynamic-range: high 可能比 Z Fold 的 screen-spanning 更早触发，但 Mate X5 根本不支持前者。留出真机测试窗口，别全信 DevTools 模拟器。
