同一款 H5 游戏，会在 iPhone、各种安卓机、平板、电脑浏览器，甚至各家 App 的内嵌网页里运行。屏幕比例从 4:3 到 21:9 都有，还可能有刘海、挖孔和底部手势条。这篇整理我们几款竖屏游戏（《幻域勇者》《万界旅馆》）用过的适配方案。
1. 先定逻辑分辨率
不要直接按设备像素写坐标。先定一个逻辑分辨率，所有 UI 和关卡都基于它设计：
- 竖屏常用 750 × 1334（iPhone 6/7/8 的 2 倍图尺寸），也可以用 390 × 844；
- 横屏常用 1334 × 750 或 1920 × 1080。
然后由引擎把逻辑画面缩放到实际屏幕上。
2. 选对缩放策略
| 策略 | 效果 | 适合 |
|---|---|---|
| FIT（等比完整显示） | 画面完整，长屏两侧或上下留黑边 | 关卡固定的解谜、棋牌 |
| FILL / ENVELOP（等比铺满） | 没有黑边，但边缘会被裁掉 | 背景可以延伸的动作游戏 |
| 固定宽度、高度自适应 | 宽度对齐，高度在一个范围内变化 | 大多数竖屏 RPG 和经营游戏 |
我们的竖屏游戏用的是第三种：宽度固定 750，高度在 1334～1680 之间自适应。超出这个范围的屏幕再用背景补边。这样大部分手机上既没有难看的黑边，也不会裁掉按钮。
3. 安全区
刘海屏和手势条会挡住界面。网页里用 CSS 环境变量拿到安全区：
.hud-top { padding-top: max(12px, env(safe-area-inset-top)); }
.hud-bottom { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
别忘了在 viewport 里加上 viewport-fit=cover，否则这些值永远是 0：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
如果在 Canvas 里绘制 UI，可以在启动时读出这些值传给游戏：
const probe = document.createElement('div');
probe.style.cssText = 'position:fixed;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom)';
document.body.append(probe);
const { top, bottom } = probe.getBoundingClientRect();
4. 方向切换不要重启游戏
用户转动手机、或者在网页里切换横竖屏时，只需要重新计算缩放，不要重新加载场景。监听 resize（比 orientationchange 更可靠），并做一次防抖：
let timer;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(() => game.scale.refresh(), 120);
});
本站的试玩窗口就是这样做的：切换横竖屏时只改变 iframe 的视口尺寸，游戏进度不会丢失。
5. 横屏游戏在竖着拿的手机上
大部分玩家默认竖着拿手机。横屏游戏有两种处理：
- 提示旋转：显示「横屏体验更佳」的遮罩，检测到横屏后自动消失；
- 强制旋转画布：把整个画布旋转 90°，玩家不用转手机也能玩，但触摸坐标需要同步变换。
不要尝试用 screen.orientation.lock() 解决问题——它只在全屏状态下有效，而且 iOS Safari 不支持。
6. 验收清单
上线前至少在这些尺寸下截图检查：
- 360 × 740（小屏安卓）
- 390 × 844（主流 iPhone）
- 430 × 932（大屏 iPhone）
- 768 × 1024（平板）
- 各个平台 App 的内嵌网页（顶部可能有胶囊按钮）
把截图拼在一起对比，比在模拟器里一台台切换要快得多。
