如何按屏幕尺寸缩放Phaser应用且不改变画布像素值？

我来帮你搞定这个Phaser游戏的缩放和移动端全屏问题！下面是针对你需求的具体实现方案：

一、核心缩放配置（保持画布像素，按比例适配屏幕） #

要实现固定画布原始像素值（1100x600）、按屏幕尺寸等比例缩放显示且不拉伸的效果，需要调整Phaser的ScaleManager配置，并监听窗口 resize 事件动态适配。

修改后的JS核心代码 #

var game = new Phaser.Game(1100, 600, Phaser.Canvas, "gameDiv");

var mainState = {
    init: function () {
        game.renderer.renderSession.roundPixels = true;
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.physics.arcade.gravity.y = 800;
        game.physics.arcade.gravity.x = -10850;

        // 关键缩放配置
        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // 保持比例，完整显示游戏内容
        game.scale.pageAlignHorizontally = true; // 缩放后水平居中
        game.scale.pageAlignVertically = true; // 缩放后垂直居中
        game.scale.setShowAll(); // 应用缩放规则
        game.scale.refresh(); // 立即刷新缩放状态

        // 监听窗口尺寸变化，自动重新适配
        game.scale.onResize.add(() => {
            game.scale.refresh();
        }, this);
    },
    preload: function(){
        game.load.image(`background`, "assets/background_1877_600.png");
    },
    create: function(){
        // 全屏功能修复（适配移动端）
        game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
        game.input.onDown.add(gofull, this);

        function gofull() {
            if (game.scale.isFullScreen) {
                game.scale.stopFullScreen();
            } else {
                // 移动端适配：不强制旋转，跟随设备方向
                game.scale.startFullScreen(false);
            }
        }

        background = game.add.tileSprite(0,0,1877,600,`background`);
    },
    update: function(){
        background.tilePosition.x -= 0.25;
    }
}

game.state.add(`mainState`,mainState);
game.state.start(`mainState`);

HTML部分添加移动端必备配置 #

移动端浏览器的缩放行为受viewport控制，必须添加以下配置才能让自适应和全屏生效：

<html>
    <head>
        <title>Agame</title>
        <script type="text/javascript" src="phaser.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
        <!-- 移动端viewport配置：禁止用户缩放，适配设备宽度 -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <style>
            html, body{
                 overflow: hidden;
                 margin: 0;
                 padding: 0;
                 width: 100%;
                 height: 100%;
            }
            #gameDiv {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="gameDiv"></div>
    </body>
</html>

二、关键逻辑说明 #

1. 缩放机制：

   • Phaser.ScaleManager.SHOW_ALL 模式会自动按屏幕尺寸等比例缩放游戏画布，游戏内的坐标、碰撞检测仍基于原始的1100x600像素值，完全符合你"不改变画布像素值"的需求。
   • 居中配置确保缩放后的游戏在屏幕中居中显示，避免出现偏移。
   • 监听onResize事件，当窗口或移动端屏幕旋转时自动刷新缩放，始终保持适配状态。

2. 移动端全屏修复：

   • viewport元标签禁止用户手动缩放，确保游戏占满设备屏幕空间。
   • game.scale.startFullScreen(false) 参数允许移动端根据设备方向自动调整全屏模式，避免强制横屏导致的显示问题。
   • 移动端浏览器要求全屏操作必须由用户主动触发（比如触摸点击），你的onDown事件已经满足这个条件，配置正确后即可生效。

3. 额外优化：

   • 给html、body和游戏容器设置100%宽高，消除默认边距，确保游戏完全占满屏幕。

这样配置后，你的游戏就能在不同尺寸的屏幕上按比例缩放显示，同时移动端的全屏功能也能正常工作了。

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