@media (orientation: landscape) 在 iPad 上常不生效，因 Safari 和 Chrome 依赖 viewport 中 width=device-width 才能正确识别方向；漏写该参数或被 JS 覆盖会导致媒体查询永不匹配，须配合 min-width 断点（如 768px/1024px）和 aspect-ratio 兜底。
为什么 @media (orientation: landscape) 在 iPad 上经常不生效
因为 Safari 和 Chrome 都不单靠 orientation 媒体查询做方向判定——它依赖 viewport 的初始设置是否正确。漏写 width=device-width，横屏时浏览器仍按竖屏宽度渲染，@media (orientation: landscape) 根本不会匹配。
常见错误包括：width=768 这类固定值（视口宽度锁死，无法响应旋转）；或 JS 动态覆盖了原始 <meta name="viewport">，导致后续旋转失效。
- 必须写：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 推荐补全：
maximum-scale=1.0, user-scalable=no（避免双击缩放干扰判断） - 真机测试前先检查控制台里
document.querySelector('meta[name="viewport"]').content是否被 JS 改过
如何写出 iPad 上真正可靠的横竖屏媒体查询
只写 @media (orientation: landscape) 是高风险操作。iPad 竖屏 window.innerWidth ≈ 768px，横屏 ≈ 1024px，但地址栏未收起时，window.innerWidth ≤ window.innerHeight，orientation 可能根本返回 portrait。
安全写法是组合断点 + 方向 + 宽高比：
立即学习“前端免费学习笔记（深入）”；
-
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)（覆盖主流 iPad 尺寸） -
@media (min-width: 1024px), (aspect-ratio > 1)（fallback：宽高比 > 1 也大概率是横屏） - 避免只用
@media (max-width: 768px)——iPad 竖屏会被当成手机，横屏则无规则兜底
flex-direction 切换后为什么布局还是错的
改 flex-direction 只是第一步，主轴和交叉轴翻转后，justify-content、align-items、height/width 都得同步调整，否则视觉上完全不对。
-
justify-content: center在row是水平居中，在column是垂直居中——语义没变，但效果位置变了 - 竖屏导航用
height: 100%，横屏必须改成width: auto; height: 20px;，否则会撑满整个屏幕宽度 - 子项若写了
width: 200px，横屏没问题，竖屏可能溢出；建议用flex: 1或max-width: 100%
100vh / 100vw 在 iPad 横竖屏下为什么总出问题
iPad Safari 中，100vh 在横屏时仍按竖屏高度计算，常导致内容被截；100vw 可能包含已隐藏地址栏的“幽灵高度”，造成横向滚动条。
解决方案分层处理：
- 优先用
100dvh和100dvw（Safari 16.4+、Chrome 105+ 支持） - 降级方案：
html, body { height: 100% }+min-height: 100% - 字体大小别用
4vw这种裸写——横屏时暴增，改用clamp(14px, 2.5vw, 16px)锁死区间
最易被忽略的是：所有基于视口单位的尺寸，都要在横竖屏两个媒体查询里分别验证真实渲染结果，不能只看代码逻辑。
