iPad和折叠屏展开态不能共用同一套断点，因二者宽度重叠（均＞720px）且宽高比不同（iPad≈1.33，折叠屏横置≈1.8–2.1），必须用min-width与min-aspect-ratio双条件组合过滤，否则会误判。
直接说结论：iPad 和折叠屏展开态不能共用同一套断点，强行用 min-width: 768px 或 min-width: 1024px 会互相误判；必须用「物理宽度 + 宽高比」双条件过滤，且折叠屏要额外防 iPad 误命中。
为什么 @media (min-width: 768px) 不能区分 iPad 和折叠屏展开态
iPad 竖屏（如 iPad Air 5）CSS 宽度约 810px，宽高比 ≈ 1.33；折叠屏（如 Galaxy Z Fold4）展开后 CSS 宽度约 744px，但宽高比 ≈ 1.13（竖屏）→ 等等，不对——实际展开态是横置使用，等效宽高比常 ≥ 1.8（比如 1896×2152 屏幕在横置时视口为 2152×1896，比例 ≈ 1.13？不，开发者工具测得其 window.innerWidth / window.innerHeight 在展开横屏时约为 1.8～2.1）。关键点在于：仅靠宽度无法区分，因为两者都超 720px；仅靠比例也不行，某些桌面显示器比例也高。真实有效的是组合判断：
-
min-width: 720px排除小屏和折叠态 -
min-aspect-ratio: 18/10（即 1.8）排除 iPad（≈1.33）、普通笔记本（≈1.6–1.76） - 不依赖
hover、screen-spanning（已废弃）、display-mode等不可靠特征
@media (min-width: 720px) and (min-aspect-ratio: 18/10) 怎么写才不被 iPad 拦截
这个断点本身没问题，但容易被误用。常见错误是把它当“桌面端”统一处理，结果 iPad Pro 横屏（1024×1366 → 比例 ≈ 1.33）不会命中，但某些安卓大平板或 Windows 双屏模拟器可能意外满足。稳妥做法是：只在这个断点里启用折叠屏专用布局，其他设备（包括 iPad）走更宽泛的 min-width: 768px 或 min-width: 1024px 分支。
- 折叠屏展开态专属规则必须包裹在该双条件媒体查询内，不可外溢
- 不要在里面重置字体大小或全局 padding，避免影响 iPad 用户体验
- 可配合 JS 检测
navigator.userAgent中的Fold/zFold/HUAWEI-MateX做二次确认，但 CSS 层不依赖它
Grid 布局如何同时兼容 iPad 横屏与折叠屏展开态
iPad 横屏（1024×1366）通常归入「大屏移动设备」，而折叠屏展开态（如 2152×1896）需按「类桌面二维空间」处理。二者布局目标不同：iPad 横屏仍倾向单列主内容+右滑侧边栏；折叠屏展开态则明确需要左导航+右内容双固定区。所以 Grid 列定义不能一刀切：
- iPad 横屏（
@media (min-width: 1024px)）：用grid-template-columns: minmax(0, 1fr) 280px，右栏收缩，左栏弹性 - 折叠屏展开态（
@media (min-width: 720px) and (min-aspect-ratio: 18/10)）：用grid-template-columns: 280px minmax(280px, 1fr)，左栏固定，右栏最小 280px 防挤压 - 禁用
grid-auto-flow: column，它在 Safari 上对折叠屏支持不稳定
字体与间距适配中哪些细节最容易被忽略
很多人以为只要改了 font-size 就算适配完成，其实折叠屏展开态下最易出问题的是行高与内边距的绝对值跳变：
- 根字号保持
16px不变，避免用clamp()或vw动态缩放——Z Fold 系列在展开/折叠瞬间会触发两次 resize，导致文字闪跳 - 折叠屏展开态的
padding建议用固定值（如16px），而非env(safe-area-inset-*)，后者在部分厂商折叠屏上返回异常值 - iPad 的
line-height可微调至1.5，但折叠屏展开态保持1.4更利于信息密度，别强行统一
真正难的不是写出能跑的代码，而是让 iPad 用户感觉不到你在“特别照顾”折叠屏——所有样式隔离必须干净，所有断点交叉逻辑必须可预测。一旦把 min-aspect-ratio 当成锦上添花，而不是必要过滤器，就很容易在测试阶段漏掉那个刚好卡在 719.9px 宽度 + 1.79 比例的边缘机型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
