Phaser框架如何获取移动设备刘海尺寸，适配顶部安全区域

要让Phaser游戏在移动设备全屏运行同时避开刘海/状态栏，你可以通过以下步骤结合Ionic的safe-area-inset-top CSS变量实现：

1. 读取顶部安全区高度 #

首先用JS获取Ionic提供的安全区变量值，转成可用的像素数值：

const safeAreaTop = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-top')) || 0;

2. 方案一：自定义缩放逻辑（推荐） #

关闭Phaser自动缩放，手动计算适配区域，确保游戏内容从安全区下方开始：

const config = {
  type: Phaser.AUTO,
  width: 800, // 替换为你的游戏原始宽度
  height: 600, // 替换为你的游戏原始高度
  scale: {
    mode: Phaser.Scale.NONE,
    parent: 'phaser-game',
    resizeCallback: (gameSize, baseSize, displaySize, resolution) => {
      // 计算扣除安全区后的可用高度
      const availableHeight = displaySize.height - safeAreaTop;
      // 计算等比缩放比例
      const scaleX = displaySize.width / baseSize.width;
      const scaleY = availableHeight / baseSize.height;
      const finalScale = Math.min(scaleX, scaleY);

      // 设置画布缩放与位置
      game.canvas.style.transform = `scale(${finalScale})`;
      game.canvas.style.top = `${safeAreaTop}px`;
      game.canvas.style.left = `${(displaySize.width - baseSize.width * finalScale) / 2}px`;
      // 确保画布占满可用宽度
      game.canvas.style.width = `${baseSize.width * finalScale}px`;
      game.canvas.style.height = `${baseSize.height * finalScale}px`;
    }
  },
  scene: {
    preload: preload,
    create: create
  }
};

const game = new Phaser.Game(config);

3. 方案二：结合FIT模式快速适配 #

如果想保留FIT缩放模式，可在游戏初始化后调整画布边距或相机视口：

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    parent: 'phaser-game'
  },
  scene: {
    create: function() {
      // 给画布添加上边距避开安全区
      this.game.canvas.style.paddingTop = `${safeAreaTop}px`;
      // 调整相机视口，让游戏内容从安全区下方渲染
      this.cameras.main.setViewport(0, safeAreaTop, this.game.config.width, this.game.config.height - safeAreaTop);
    }
  }
};

const game = new Phaser.Game(config);

注意事项 #

• 确保Ionic的样式已正确引入，--ion-safe-area-top变量能被正常读取
• 优先在真实刘海屏设备测试，模拟器的安全区数值可能与实际设备有差异
• 如果游戏有UI元素固定在顶部，需额外调整其y坐标，加上safeAreaTop值避免被遮挡

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