外屏识别应使用@supports not (horizontal-viewport-segments: 2)，而非媒体查询尺寸；外屏布局优先用flex-direction: column替代Grid；避免display: none，改用visibility: hidden等可访问方案；需监听visualViewport.width清理JS状态残留。
外屏小尺寸下不能靠 @media (min-width: 720px) 切换布局——Z Fold 外屏竖屏时 window.innerWidth 约 375px，和内屏半开态几乎一样，但用户意图完全不同：外屏是“手机模式”，内屏半开是“过渡态”。必须用物理设备能力区分，而不是猜尺寸。
用 @supports + horizontal-viewport-segments 排除外屏
外屏本质是单视口、无铰链分割的普通小屏，所以真正要匹配的是“非双视口”状态。别写 @media (horizontal-viewport-segments: 1)（该值不被支持），而是反向检测：
-
@supports not (horizontal-viewport-segments: 2)是目前最稳的外屏识别方式，Chrome/Edge 119+ 和 Safari 16.4+ 都能正确返回 false，旧浏览器也安全降级 - 不要嵌套在其他媒体查询里，比如
@media (max-width: 480px) and (not (horizontal-viewport-segments: 2))会失效 - 匹配成功时，
document.body.clientWidth就是你熟悉的手机宽度（360–420px），可放心按传统小屏逻辑组织流
外屏下用 flex-direction: column 替代网格重排
Grid 的 grid-template-areas 在外屏小尺寸下容易因命名区域缺失或隐式轨道导致回退异常；而 Flexbox 的线性流更可控：
- 默认设
display: flex; flex-direction: row;（内屏展开态） - 在外屏规则块中直接切为
flex-direction: column;，所有子项自然垂直堆叠 - 避免给子项设
flex-basis或width，改用flex: 1+min-width: 0防止文本撑破容器 - 若需顶部导航+主内容+底部操作栏三段式，用
gap: 12px比margin更可靠，不会因父容器overflow: hidden被裁剪
慎用 display: none 隐藏外屏不需要的模块
外屏空间紧张，常想直接 display: none 掉侧边栏或工具面板，但这会破坏可访问性和滚动锚点：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器会跳过
display: none元素，如果那是关键操作入口（如“切换主题”按钮），残障用户就无法触达 - 页面有
scroll-behavior: smooth时，目标元素若被display: none，element.scrollIntoView()会静默失败 - 替代方案：
visibility: hidden+height: 0+overflow: hidden，保留 DOM 位置和语义结构 - 如果必须移除视觉占用，用
transform: translateY(-100%)+opacity: 0，并确保aria-hidden="true"同步更新
外屏真正的难点不在样式切换，而在“状态残留”：比如用户在外屏点击了菜单，然后合上手机再展开到内屏，JS 状态没清理，UI 就卡在错误的折叠态。这类问题不会报错，但会让交互断层——得靠 visualViewport.width 监听 + 显式重置类名来兜底。
