Phaser 3项目设置1920×1080尺寸如何适配任意屏幕并正确缩放？

Phaser 3 内置了成熟的缩放管理器（Scale Manager），无需手动监听窗口事件计算缩放比例，直接通过配置即可满足大部分适配需求：

第一步：修改游戏基础配置 #

调整游戏初始化时的scale字段配置，保留你原来的1920×1080作为设计基准分辨率即可：

const gameConfig = {
  type: Phaser.AUTO,
  // 保留原有设计分辨率作为基础尺寸
  width: 1920,
  height: 1080,
  scene: [你的场景列表],
  // 核心缩放配置
  scale: {
    // 适配模式：FIT代表保持16:9宽高比缩放，完整展示所有游戏内容，不会裁切
    mode: Phaser.Scale.FIT,
    // 自动将画布在浏览器视口居中显示
    autoCenter: Phaser.Scale.CENTER_BOTH,
    // 可选配置：限制最小/最大缩放尺寸，避免过度拉伸导致画面模糊
    min: {
      width: 640,
      height: 360
    },
    max: {
      width: 3840,
      height: 2160
    }
  }
}

new Phaser.Game(gameConfig)

不同适配模式说明：

• 如果你不需要保留黑边，允许裁切游戏边缘内容铺满屏幕，可以将mode替换为Phaser.Scale.ENVELOP
• 如果你不需要固定16:9比例，希望画布完全跟随窗口尺寸变化，可以将mode替换为Phaser.Scale.RESIZE，这种模式下所有元素的位置都需要你手动适配调整

第二步：动态UI元素适配 #

如果你的游戏中有需要固定停靠在屏幕边缘的UI（比如左上角返回按钮、右下角设置按钮），需要在场景中监听缩放事件动态调整位置：

class 你的场景类 extends Phaser.Scene {
  create() {
    // 监听窗口尺寸变化事件
    this.scale.on('resize', this.adaptUI, this)
    // 场景初始化时先执行一次适配
    this.adaptUI(this.scale.gameSize)
  }

  adaptUI(gameSize) {
    // gameSize.width / gameSize.height 为当前画布实际渲染尺寸
    // 示例：固定返回按钮在左上角，边距20px
    this.backBtn.setPosition(20, 20)
    // 示例：固定分数文本在右上角，边距20px
    this.scoreText.setPosition(gameSize.width - 20, 20)
  }
}

其他注意事项 #

• 不要直接用window.innerWidth/window.innerHeight获取尺寸，优先用Scale Manager提供的尺寸参数，避免设备像素比计算错误
• 移动端适配需要在HTML的head标签中加入viewport配置，避免移动端浏览器自动缩放页面：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

内容的提问来源于stack exchange，提问作者Deeroy