@media (orientation: landscape) 经常失效因它仅检测设备自然方向而非视口宽高比，ios safari 15+ 旋转时还存在延迟或跳过事件，可靠方案是叠加 min-aspect-ratio 或尺寸组合断点。
为什么@media (orientation: landscape)经常不生效
它只读设备自然方向，不是当前视口宽高比。iPad竖着放但窗口拉宽、折叠屏半展开、键盘弹出时，orientation仍返回portrait，断点根本不会触发。iOS Safari 15+ 在快速旋转时还可能延迟或跳过事件。
真正可靠的判断方式是叠加使用：@media (orientation: landscape) and (min-aspect-ratio: 1.2/1)，或者更稳妥地用尺寸组合：@media (max-height: 480px) and (min-width: 640px)。前者兜底方向误判，后者响应真实布局压力点——横屏下高度骤减才是导致网格塌、文字溢、按钮沉底的主因。
- 别单独依赖
orientation，尤其在 Android WebView 或折叠屏场景 -
min-aspect-ratio: 1.2/1比1/1更安全，能过滤掉部分小屏竖向误判 - 旧版 Safari（aspect-ratio，需用 JS 回退：
matchMedia('(min-width: 1px)')+ 手动比对window.innerWidth > window.innerHeight
grid-template-columns 在横屏下为什么会突然变一列
不是 CSS 错了，是容器宽度变大但子项约束没更新。比如竖屏写 grid-template-columns: repeat(3, 1fr)，横屏后宽度翻倍，但浏览器不会自动改成 repeat(4, 1fr) 或保持比例——它只是把三列撑得更宽，一旦内容超出或行高失控，视觉上就“断”了。
必须显式重设：
- 横屏规则里补上
.grid { grid-template-columns: repeat(2, 1fr); }（双列更适配窄高视口） - 避免固定
fr数量，改用grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，让浏览器按可用宽度自动填列 - iOS Safari 对
grid-auto-flow: column有渲染延迟，加transform: translateZ(0)强制 GPU 加速可缓解闪动
100vh 和 100vw 在横屏下为什么特别危险
100vh 在 iPhone 14 横屏下只有约 390px 高，但页面内容按竖屏逻辑排布，结果顶部被截、底部按钮不可点；100vw 在 iOS Safari 中会包含已隐藏的地址栏高度，导致实际渲染宽度不足，内容右溢出。
替代方案要分层选：
- 高度类：优先用
min-height: 100%+html, body { height: 100% }+overflow-y: auto，比100vh稳定 - 现代环境可用
100dvh（Safari 16.4+/Chrome 105+），但 Android WebView 旧版本不认，不能单独依赖 - 宽度类：弃用
100vw，改用width: 100%或100dvw（同dvh兼容性） - 绝对定位慎用
top: calc(100vh - 60px)，横屏时计算值过小，直接贴顶；改用top: env(safe-area-inset-top) + calc()
真机测试时最容易忽略的三个细节
模拟器里切横屏很顺，但真机上系统 UI 干扰、浏览器延迟、渲染差异会让样式闪跳甚至失效。
- iOS 控制中心下拉、Android 状态栏展开，会临时改变视口尺寸，引发 layout shift —— 加一层节流：
window.addEventListener('resize', () => { if (matchMedia('(orientation: landscape)').matches) { /* 重置逻辑 */ } }, { passive: true }) - 第三方 UI 库（如 Vant、NutUI）内部用了
position: absolute或transform，会脱离 flex/grid 流，父容器加display: flow-root也救不了，得单独重写该组件的定位规则 - flex-basis 在 iOS Safari 和 Android WebView 中解析不一致：有的转成
auto，有的保留像素值 —— 真机上务必检查 computed 样式，别信模拟器
横屏适配最麻烦的从来不是写多少 CSS，而是默认行为叠加后的连锁反应：一个没设 max-width: 100% 的图片、一行漏掉的 viewport meta、一次没节流的 resize 监听，都可能让整套断点失效。关键不是覆盖所有属性，而是盯住高度变化、容器裁剪、定位基准这三个杠杆点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
