@media (orientation: landscape) 单独使用在ipad上不可靠，必须配合正确的viewport设置（如width=device-width）、尺寸断点（如min-width: 1024px）及动态单位（如100dvh）才能稳定响应横屏。
@media (orientation: landscape) 单独用在 iPad 上基本不可靠，必须搭配 viewport 设置、尺寸断点和动态单位才能稳定响应。
viewport 标签写错，@media (orientation: landscape) 就不会触发
iPad 的 Safari 和 Chrome 都依赖 <meta name="viewport"> 识别方向变化。漏掉 width=device-width，横屏时浏览器仍按竖屏逻辑渲染，orientation 媒体查询永远不匹配。
- 常见错误：用固定值如
width=768——视口宽度不变，媒体查询无从重算 - 更隐蔽的问题：JS 动态覆盖了初始
viewport标签，导致后续旋转失效 - 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
别只靠 orientation，iPad 竖屏 768px、横屏 1024px，必须叠加宽度断点
iPad 竖屏和横屏的 device-width 不同，但仅靠 orientation 容易漏判。比如横屏时若地址栏未收起，window.innerWidth ，<code>orientation: landscape 可能根本不匹配。
- 安全写法是组合判断：
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) - 更稳妥可加一层 fallback：
@media (min-width: 1024px), (aspect-ratio > 1) - 避免只写
@media (max-width: 768px)——iPad 竖屏会被当成手机，横屏又没规则兜底
flex-direction 不会自动翻转，必须显式声明
CSS 不会因为屏幕旋转就帮你把 flex-direction: column 切成 row。竖屏导航用列布局，横屏想变顶部通栏，得手动覆盖。
- 默认设
flex-direction: column，横屏媒体查询里明确写flex-direction: row - 注意
justify-content和align-items在不同主轴下的语义变化（例如justify-content: center在row是水平居中，在column是垂直居中） - 别忘了
height和width也要调换：nav { height: 100%; }竖屏有效，横屏得改成width: auto; height: 20px;
100vh/100vw 在 iPad 横竖屏下极易翻车
iPad Safari 中，横屏时 100vh 仍按竖屏高度计算，常导致内容被截；100vw 则可能包含已隐藏地址栏高度，造成横向溢出。
- 优先用
100dvh和100dvw（Safari 16.4+、Chrome 105+ 支持） - 降级方案：
min-height: 100%+html, body { height: 100% } -
font-size: 4vw这类写法在横屏时暴增，改用clamp(14px, 2.5vw, 16px)锁死区间
真机测试前最容易被忽略的一点：Chrome DevTools 的设备模拟器默认开启 “Throttle CPU”，会掩盖 flex 换行延迟或闪烁；切到真实 iPad 用远程调试，才能看到实际重排表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
