正确写法是@media screen and (orientation: landscape)，旧版Android Chrome需显式声明screen类型；viewport必须含width=device-width；优先用100dvh，fallback用100%+flex；横屏UI需重调触控区、字号及布局。
必须写对 @media screen and (orientation: landscape)
单独写 @media (orientation: landscape) 在旧版 Android Chrome（v79 之前）和部分 WebView 中会被完全忽略，规则压根不生效。正确写法必须显式声明 screen 类型，且 and 前后不能有空格（screenand 是常见拼错）。orientation 只在设备物理朝向变化、浏览器完成重排后触发，不是实时监听——所以别指望它立刻响应手指旋转动作。
viewport 标签写错，横屏媒体查询就失效
如果 缺失 width=device-width，iOS Safari 和多数 Android 浏览器会按固定宽度（如 980px）渲染，orientation 查询永远不匹配。更隐蔽的问题是：JS 动态重写了 标签，后续旋转就不再触发重排。推荐用这个最小安全集：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意：user-scalable=no 对 H5 游戏很关键——否则用户双指缩放会破坏布局比例。
别依赖 100vh，改用 100dvh 或 JS fallback
横屏时 iOS Safari 的 100vh 仍按竖屏高度计算（比如 iPhone 14 是 844px），但实际可用高度只剩约 390px，导致 UI 被截断；Android Chrome 100 以下又不支持 dvh 单位。稳妥做法是：
- 优先用
height: 100dvh，它自动排除地址栏/状态栏占用 - 老环境 fallback 到
height: 100%+ 父容器display: flex; flex-direction: column - 游戏主容器避免设固定
height，改用min-height配合flex: 1
横屏下触控区域和文字必须重调，不是简单拉宽
H5 游戏横屏不是把竖屏 UI 拉伸就行。手指横向滑动更自然，但误触率上升；远距离观看需求变强，小字号根本看不清。实操要点：
- 按钮
padding从竖屏的12px提到20px，防止滑动时点偏 -
font-size至少放大 1.3 倍，用rem或em，别用vh（横屏时高度骤减） - 侧边操作区（如技能栏）从底部移到右边缘，配合
flex-direction: row-reverse - 禁用
touch-action: pan-y，否则横屏时无法左右拖拽地图
最易被忽略的是：横屏时 window.innerHeight 可能突然小于 window.innerWidth，但某些安卓折叠屏半展开状态下，orientation: landscape 仍不触发——这时得靠 JS 监听 resize + 比较宽高比兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
