应使用@media (horizontal-viewport-segments: 2)判断折叠屏双栏展开态，因其基于系统确认的物理分割信号，避免min-width在铰链动画中因innerwidth跳变导致的布局闪动、错位等问题。
直接用 @media (horizontal-viewport-segments: 2) 判断展开态，别碰 min-width 媒体查询——后者在铰链动画中会反复触发，导致布局闪动、错位甚至白屏。
为什么 min-width 在折叠屏上完全不可靠
折叠动画过程中，window.innerWidth 会在 375px → 720px → 375px 之间剧烈跳变，@media (min-width: 720px) 会多次匹配/失配。Z Fold 展开一半时，系统可能报告“720px 宽度”，但实际可用区域只有左侧 375px，右侧仍是黑边或未渲染状态。此时若样式强行切双栏，DOM 元素会挤进单侧视口，造成文字重叠、按钮消失、position: fixed 错位等现象。
-
horizontal-viewport-segments: 2是物理分割信号，只在系统确认双视口稳定就绪后才匹配，无中间态 - 它不依赖尺寸计算，不受缩放、地址栏显隐、键盘唤起干扰
- Chrome 110+ / Edge 110+ / Safari 16.4+ 原生支持，旧版本静默忽略，不会报错也不会破坏默认布局
@media (horizontal-viewport-segments: 2) 的写法和陷阱
语法必须严格：只能是 @media (horizontal-viewport-segments: 2)，不能写成 >1、=2、2px 或嵌套在 and 里（如 @media (min-width: 720px) and (horizontal-viewport-segments: 2)）——部分 Chromium 版本会直接丢弃整条规则。
- 匹配时
document.body.clientWidth返回的是单侧宽度（约 375–420px），不是总宽；别用它算栅格列数 - 必须搭配降级样式：默认按单屏设计，仅在该媒体查询内激活双栏逻辑（如
.layout--dual类） - Safari/Firefox 不支持，要用
@supports (horizontal-viewport-segments: 2)包裹，否则整块 CSS 被忽略
JS 监听要防抖 + 读 visualViewport.width
resize 事件在折叠动画中严重节流（Pixel Fold 上常只触发 1 次），而 matchMedia 可捕获状态切换关键帧，但回调若不加控制，会导致 UI 疯狂重排。
- 监听必须在脚本加载时立即执行，不能等
DOMContentLoaded—— 折叠状态可能在 DOM 构建前已变化 - 回调里用
requestAnimationFrame批量更新类名，避免同步 DOM 操作 - 读宽度必须用
visualViewport.width，window.innerWidth在动画中不稳定 - 务必加防抖（建议 300ms），否则铰链缓动过程会连续触发十几次
双栏布局别依赖 flex 自动换行
传统 display: flex; flex-wrap: wrap 在双视口下会把所有子项塞进第一个视口，第二个视口空白——因为 flex 容器仍被当作一个逻辑区域，不感知物理分割。
- 用
grid-template-areas显式声明区域更稳："sidebar main"对应左栏右栏 - 关键组件（如导航栏、弹窗）加
position: sticky，防止滚动时跨视口错位 - 所有
position: absolute或fixed元素必须设inset: 0或max-width: 100dvw，防止溢出单个视口 - 禁用
user-scalable=no，允许用户手动缩放调整阅读体验
真正难的不是写出正确的媒体查询，而是降级逻辑是否覆盖了所有未匹配场景——比如 Safari 16.3 下 horizontal-viewport-segments 不支持，但用户已经展开设备，此时若没 fallback，双栏布局就彻底消失。物理分割信号永远比尺寸推断可靠，但浏览器支持仍是碎片化的，得靠防御性写法兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
