双屏折叠设备应优先用@media (width < 600px)判断折叠态，展开态结合@media (min-width: 720px) and (min-height: 840px)，避免依赖orientation；container queries不适用于折叠状态检测，因它响应容器而非视口变化；JS监听需用visualViewport.width加防抖，并校验UA。
双屏折叠设备的媒体查询怎么写
现代折叠屏手机（比如三星 Galaxy Z Fold 系列、华为 Mate X 系列）在展开和折叠状态下，window.innerWidth 和 window.innerHeight 会剧烈变化，但仅靠传统 @media (min-width) 容易误判——因为系统可能维持旧 viewport 尺寸、或触发中间过渡态（如半开状态）。
关键不是“多宽”，而是“当前是否处于折叠态”。Chrome 和 Edge 支持 @media (display-mode: standalone)，但更可靠的是用 @media (screen-spanning: single-fold-vertical)（实验性，仅 Chromium 119+）或回退到 @media (width) + @media (height) 组合判断。
常见错误现象：
- 折叠后页面仍按大屏布局渲染，内容被裁切
- 展开瞬间触发两次 resize，导致布局抖动
- 使用
matchMedia监听时未加防抖，频繁重绘
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (width < 600px)判断折叠态（多数折叠屏折叠后宽度 ≈ 280–360px） - 展开态可结合
@media (min-width: 720px) and (min-height: 840px)排除竖屏小屏干扰 - 避免只依赖
orientation: landscape，因部分设备展开后仍是竖屏（如 Z Fold 横向展开）
CSS container queries 能替代 media queries 吗
不能直接替代。container queries（@container）响应的是容器尺寸，不是视口尺寸；而折叠行为影响的是整个 viewport，所以它对「双屏状态切换」无感知。
使用场景有限：
- 适合组件级自适应（比如一个卡片在折叠屏左侧栏里自动收缩）
- 不适合控制整体布局流（如从单列变双列）
容易踩的坑：
- 忘记给父容器加
container-type: inline-size，@container完全不生效 - 在
上设 container —— 失败，body不是 layout-containment 边界 - 误以为
@container (width > 500px)能捕获折叠事件 —— 实际上它只在容器被 JS 或 CSS 强制 resize 时才重新计算，不监听系统折叠动作
性能影响：container queries 触发重排成本低于全局 media query，但若嵌套过深或容器过多，仍可能拖慢渲染。
JavaScript 如何安全监听折叠状态变化
浏览器没有原生 foldchange 事件，目前最稳的方式是监听 resize + 检查 window.screen 和 window.visualViewport 的组合特征。
常见错误现象：
- 直接监听
window.onresize导致高频触发（尤其在展开动画过程中） - 用
screen.width判断 —— 它返回的是物理像素，且在折叠/展开时不更新 - 忽略
visualViewport的 offset（比如软键盘弹出时也会触发 resize）
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
visualViewport?.width替代window.innerWidth，它更贴近用户实际可见区域 - 加简单防抖：延迟 150ms 再执行布局逻辑，避开过渡帧
- 补充检测
navigator.userAgent是否含Fold或Android.*; wv，避免在非折叠设备上浪费判断
示例逻辑片段：
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const vw = visualViewport?.width || window.innerWidth;
if (vw < 400) {
document.body.classList.add('folded');
} else {
document.body.classList.remove('folded');
}
}, 150);
});
为什么 flex/grid 在双屏展开后有时错位
根本原因是：折叠屏展开时，浏览器可能先重绘 layout，再更新 CSS 变量或伪类，导致 grid-template-columns 或 flex-wrap 计算基于旧尺寸。
参数差异：
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))在展开瞬间可能仍按 300px 分列，造成列数异常 -
flex: 1在子元素未设置min-width时，可能压缩为 0
兼容性影响：
- Safari 对
visualViewport支持差，iOS 折叠设备（暂无）需降级处理 - Android WebView 版本碎片化，
screenSpanning基本不可用
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有弹性容器加
min-width: 0（防止 flex item 溢出挤压） - grid 布局中避免纯
1fr，改用minmax(320px, 1fr) - 展开后手动触发一次
document.body.offsetHeight强制重排（极简 hack，慎用）
折叠状态的边界并不总是清晰的——系统报告的“已展开”可能早于渲染完成，这时候靠 CSS 响应式本身不够，得靠 JS 主动确认视觉反馈是否到位。
