Phaser3技术问询：如何强制WebView中游戏以横屏模式启动

一、WebView原生层配置（核心前提） #

要让WebView直接以横屏模式启动，必须在原生代码层面设置强制横屏：

• Android：在对应Activity的AndroidManifest.xml中添加android:screenOrientation="landscape"，或在代码中调用setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
• iOS：在项目Info.plist里将UISupportedInterfaceOrientations设置为仅包含横屏方向（UIInterfaceOrientationLandscapeLeft、UIInterfaceOrientationLandscapeRight），或在WKWebView所在ViewController中重写supportedInterfaceOrientations返回横屏方向。

二、Phaser游戏配置调整 #

修改现有游戏配置，确保无论屏幕实际方向如何，游戏都按横屏比例适配：

1. 调整缩放模式与动态尺寸逻辑 #

替换gameConfig中的scale配置，加入方向检测与自适应逻辑：

import { Types } from "phaser";
import baseGameConfig from "@games/config.base";
import Scenes from "./src/scenes";

export const DEFAULT_WIDTH: number = 1280;
export const DEFAULT_HEIGHT: number = 720;
export const MAX_WIDTH: number = 1920;
export const MAX_HEIGHT: number = 1080;
export let SCALE_MODE: "FIT" | "SMOOTH" = "SMOOTH";

// 检测屏幕方向，竖屏时交换游戏宽高以保持横屏比例
const isLandscape = window.innerWidth > window.innerHeight;
const targetWidth = isLandscape ? DEFAULT_WIDTH : DEFAULT_HEIGHT;
const targetHeight = isLandscape ? DEFAULT_HEIGHT : DEFAULT_WIDTH;

const gameConfig: Types.Core.GameConfig = {
  ...baseGameConfig,
  title: "monkeygo",
  scene: Scenes.BootScene.scene,
  physics: {
    default: "arcade",
    arcade: {
      debug: process.env.NODE_ENV !== "production",
      gravity: { y: 800 },
      fps: 30,
      fixedStep: true,
      tileBias: 32,
    },
  },
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: targetWidth,
    height: targetHeight,
    minWidth: DEFAULT_HEIGHT,
    minHeight: DEFAULT_WIDTH,
    maxWidth: MAX_HEIGHT,
    maxHeight: MAX_WIDTH,
    // 监听屏幕尺寸变化，动态调整游戏方向适配
    resizeCallback: (gameSize, baseSize, displaySize) => {
      const currentIsLandscape = displaySize.width > displaySize.height;
      if (currentIsLandscape !== isLandscape) {
        this.scale.resize(
          currentIsLandscape ? DEFAULT_WIDTH : DEFAULT_HEIGHT,
          currentIsLandscape ? DEFAULT_HEIGHT : DEFAULT_WIDTH
        );
      }
    }
  },
  input: {
    activePointers: 3,
  },
};

export default gameConfig;

2. 全局CSS兜底适配 #

在游戏入口HTML中添加CSS，确保游戏容器占满屏幕，即使WebView意外竖屏也能强制横屏显示：

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 强制游戏容器横屏渲染 */
canvas {
  width: 100vh !important;
  height: 100vw !important;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
  position: absolute;
}

三、BootScene补充锁定逻辑 #

在启动场景中添加方向锁定，确保游戏始终按横屏逻辑运行：

export class BootScene extends Phaser.Scene {
  constructor() {
    super("BootScene");
  }

  init() {
    // 锁定游戏为横屏方向
    this.scale.lockOrientation("landscape");
  }

  // 其他初始化代码...
}

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