双屏折叠设备应优先用@media (width

双屏折叠设备的媒体查询怎么写

现代折叠屏手机（比如三星 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 判断折叠态（多数折叠屏折叠后宽度 ≈ 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 的组合特征。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

常见错误现象：

• 直接监听 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 主动确认视觉反馈是否到位。