HTML5 游戏在手机上的缩放、全屏和兼容性

HTML5 游戏的缩放问题

HTML5 游戏（包括 TyranoBuilder 导出）在手机上最常见的问题就是画面尺寸不对——要么太小（PC 分辨率在手机上显得像手机里的手机），要么太大被裁切，要么比例不对出现黑边。

这些问题的根源是：HTML5 游戏用 <canvas> 标签定义渲染区域，默认按游戏作者设定的像素尺寸渲染，不会自动适应手机屏幕。JoiPlay 的 WebView 内核把这个 canvas 塞进手机屏幕，但缩放策略需要手动调。

缩放参数 zoom 的调整方法

大部分 HTML5 游戏的 index.html 里有一行类似这样的 JavaScript：

var scale = 1.0;  // 或 var zoom = 1.0;

或者：

canvas.style.transform = "scale(1)";

这个值控制了游戏画面的缩放倍率。调整方法：

1. 在 JoiPlay 中点击该游戏 → 进入设置 → HTML5 / Game Canvas / Zoom 相关选项
2. 找到缩放值（默认 1.0），调到合适的数值
3. 一般经验值：手机上 1080p 屏幕约 0.6~0.8，720p 屏幕约 0.7~0.9
4. 调完保存，重启游戏看效果

调缩放的另一种方式是直接修改 index.html 文件里的 scale 值（用文件编辑器在手机上改，或在 PC 上改完重新拷到手机）。JoiPlay 设置里改是更方便的方式，但不是所有版本的 JoiPlay 都暴露了这个选项。

全屏显示设置

JoiPlay 对 HTML5 游戏提供了三种全屏策略：

Flash（Ruffle）的缩放

Flash 游戏（SWF）的缩放由 Ruffle 插件自己控制。进入游戏设置 → Ruffle / Flash 相关选项，里面有缩放和全屏策略。经典 Flash 小游戏通常是固定分辨率（800×600、640×480 等），在手机上最稳的是"保持比例居中"。

常见画面问题排查