适配折叠屏需正确设置viewport并动态响应形态变化：必须包含viewport-fit=cover，保留width=device-width和initial-scale=1.0，避免禁用缩放；优先用宽高比+screen.orientationchange识别状态，辅以visualViewport.width；媒体查询应采用aspect-ratio等语义化条件；rem/vw方案须在resize和orientationchange后动态重算基准。
适配折叠屏的关键不是简单加个 viewport 标签，而是让标签内容真正响应设备形态变化——尤其是展开与折叠两种状态的切换。
必须写对 viewport 的 content 属性
基础写法不够，折叠屏需要额外支持全屏渲染：
-
必含
viewport-fit=cover：否则折叠态下内容可能被系统UI（如折痕区、刘海）裁切，或出现意外缩放； - 保留
width=device-width和initial-scale=1.0，这是所有移动端适配的起点； - 避免写死
maximum-scale=1.0, user-scalable=no，这会破坏可访问性，且在 iOS 13+ 可能触发降权提示； - 正确示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
别只靠 window.innerWidth 做判断
折叠动画过程中，window.innerWidth 容易抖动或延迟更新，单靠它识别状态不可靠：
- 优先结合
screen.width和screen.height计算宽高比（aspect-ratio），再匹配媒体查询； - 监听
screen.orientationchange事件做二次校验，比如展开时多为landscape-primary，但不同厂商实现不一，不能仅靠字符串匹配； - 必要时用
visualViewport.width辅助判断，尤其在 Android Chrome 115+ 中，screen.width可能在折叠后仍返回旧值。
用媒体查询组合识别折叠/展开态
固定像素断点（如 @media (min-width: 768px)）在折叠屏上容易失效，应改用更语义化的组合：
立即学习“前端免费学习笔记（深入）”；
- 展开态常见超宽比例：@media (min-width: 600px) and (aspect-ratio: 21/9)；
- 折叠态倾向竖屏+常规比例：@media (max-width: 414px) and (orientation: portrait)；
- 避免使用
transform: scale()模拟适配，它会破坏点击区域、滚动行为和字体渲染； - 样式初始化时机很重要——确保 CSS 加载完成后再读取尺寸，避免因缓存导致误判。
rem 或 vw 方案要配合 viewport 动态调整
如果项目用 rem（基于 html font-size）或 vw（基于视口宽度），需注意折叠过程中的基准变化：
- 不要在 JS 中一次性计算并固定 font-size，应在
resize+orientationchange后重新计算； - PostCSS 转换 vw 时，
viewportWidth建议设为设计稿基准（如 375），但最终效果仍依赖 viewport 是否生效； - 折叠屏横屏展开后视口宽度可能达 1800px+，若 rem 基准未重算，文字和间距会明显偏小。
