移动端H5横屏游戏需结合媒体查询、JavaScript引导、viewport精准设置及安全区适配：用orientation: landscape检测横屏并加载样式，监听resize事件提示用户横置，设置viewport禁缩放，动态调整canvas尺寸，利用env(safe-area-inset-*)或JS注入变量处理刘海屏。
移动端横屏玩游戏时，H5 页面常需锁定横屏并适配全屏样式，媒体查询本身无法“锁定”方向，但可配合 JavaScript 和 viewport 控制实现视觉与布局的横屏适配。关键在于：识别横屏状态、动态调整样式、阻止用户误切回竖屏，并兼顾 iOS/Android 差异。
用 media query 检测横屏并加载专属样式
通过 orientation 或 aspect-ratio 媒体特性判断横屏，推荐使用 orientation: landscape（兼容性好），但注意它仅反映当前视口方向，不保证设备物理朝向：
@media screen and (orientation: landscape) { /* 横屏专属样式，如宽高设为 100vh/100vw、隐藏 UI 元素、旋转按钮等 */ }- 避免只依赖
min-width，因 iPad 竖屏宽度也可能超 768px；优先以方向 + 宽高比组合判断，例如：@media screen and (orientation: landscape) and (min-aspect-ratio: 16/9) { ... } - 对游戏核心容器（如
#game-canvas）设置width: 100vw; height: 100vh; transform: rotate(90deg); transform-origin: center;是常见做法，但更推荐用 CSS 逻辑方向（inline-size/block-size）或直接 layout 适配，避免 rotate 带来点击坐标偏移问题。
用 JavaScript 主动提示并引导横屏（弥补 media query 被动性）
媒体查询不会触发横屏锁定，必须用 JS 监听 resize 或 orientationchange 事件，并干预用户体验：
- 监听
window.addEventListener('resize', handleOrientation)，结合window.innerWidth > window.innerHeight判断是否进入横屏； - 检测到竖屏时，在页面顶部显示半透明横屏提示层（含箭头图标和文字：“请将手机横过来”），并阻止游戏逻辑运行；
- iOS Safari 不支持屏幕方向 API（
screen.orientation.lock），Android Chrome 支持但需用户手势触发（如点击“开始游戏”后调用），因此“锁定”本质是引导 + 样式适配 + 逻辑拦截，而非系统级强制。
viewport 设置与缩放控制要精准
错误的 viewport 会导致横屏下页面被压缩或出现横向滚动条，破坏全屏感：
- 必须设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">； - 若游戏 Canvas 需铺满屏幕，建议用 JS 动态设置 canvas 宽高为
screen.width/screen.height（注意：iOS 的screen.width在横屏时仍返回竖屏值，应改用window.innerWidth/window.innerHeight）； - 在横屏样式中给 body 加
overflow: hidden; margin: 0;，防止滚动条或边距干扰全屏效果。
兼容 iOS Safe Area 与刘海屏
横屏时 iPhone 的安全区域会变化（如右上角电池图标变成左上角），需用 CSS 环境变量适配：
- 在横屏样式中使用：
padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left);—— 但注意横屏后 inset 方向会变，实际应根据 orientation 动态映射（例如横屏时safe-area-inset-left可能对应原竖屏的safe-area-inset-bottom）； - 更稳妥方式：用 JS 获取
document.documentElement.style.setProperty('--safe-left', `${window.visualViewport?.offsetLeft || 0}px`)等动态注入变量，再在 CSS 中引用； - 游戏 UI 元素（如返回按钮、音效开关）建议固定在安全区域内，避免被圆角或传感器区域遮挡。
不复杂但容易忽略：媒体查询只是样式响应的第一步，真正可靠的横屏体验 = 合理的 viewport + 方向检测 + 动态样式切换 + 安全区域处理 + 用户引导层。把 CSS 当“皮肤”，JS 当“神经”，才能让横屏游戏稳稳撑满屏幕。
