真机横屏样式失效主因是@media (orientation: landscape)在微信x5、安卓webview及ios safari中不可靠，应改用min-aspect-ratio与max-height组合断点，并配合dvh单位、clamp响应式字体、显式flex-direction及js监听window.innerwidth/innerheight。
直接用 @media (orientation: landscape) 基本无效
真机上横屏后样式不更新、延迟生效或干脆漏掉，不是你写错了，而是这个媒体查询在微信 X5 内核、多数安卓 WebView 以及 iOS Safari 初次加载时根本不可靠。它只依赖系统上报的“逻辑方向”，不感知 window.innerHeight 骤降（比如 iPhone 14 横屏从 926px → 390px），也不响应地址栏收起、折叠屏半开等真实视口变化。单独写 @media (orientation: landscape) 等于没写。
真正该用的 CSS 断点组合
横屏的本质是视口变“矮”、变“宽”，高度才是布局崩坏的导火索。必须用能反映真实瓶颈的组合条件：
-
@media (min-aspect-ratio: 13/9) and (max-height: 480px)：比单纯orientation抗干扰，键盘弹出、折叠屏展开一半也不易误判 -
@media (max-height: 480px) and (min-width: 640px)：直接响应“高度跌破临界值”这一事实，iOS/Android 兼容性好 - 必须搭配
@media (orientation: landscape)做双保险，但绝不能只靠它
所有断点都需配合正确 <meta name="viewport">，漏掉 width=device-width 或被 JS 动态覆盖，整个媒体查询链就失效。
横屏下最危险的 CSS 单位和写法
这些看似合理写法，在横屏切换瞬间就会导致内容截断、溢出或错位：
-
height: 100vh→ 横屏后变成 390px，内容被砍掉；改用min-height: 100dvh（iOS 16+/Chrome 支持），降级为min-height: 300px -
width: 100vw→ iOS Safari 横屏含已隐藏地址栏高度，造成水平溢出；优先用width: 100%+overflow-x: hidden -
font-size: 4vw→ 横屏宽度翻倍，文字暴增撑破容器；必须套clamp(14px, 2.5vw, 16px) -
flex-direction: column不会自动翻转 → 横屏必须显式写flex-direction: row，否则子项仍堆叠
纯 CSS 不够，JS 必须补位
媒体查询只是被动响应，而横屏游戏需要主动干预渲染时机和尺寸判断：
- 用
window.matchMedia("(orientation: landscape)")监听，别用已废弃的orientationchange事件 - 页面首次加载必须手动调用一次判断函数（
checkOrientation()），否则直出横屏页面直接错过 - 加 50ms 防抖，避免 resize 频繁触发导致重排卡顿
- 必要时强制重排：
document.body.offsetHeight触发回流，再操作 DOM
最常被忽略的一点：横屏游戏 Canvas 尺寸不能依赖 uni.getSystemInfo 或 window.screen.width —— 它们返回的是设备物理方向值，不是当前朝向下的可用视口尺寸。必须用 window.innerWidth/window.innerHeight 并监听变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
