移动设备上的 Phaser PWA 扩展问题答案

【问题标题】：Phaser PWA Scaling Issue on Mobile移动设备上的 Phaser PWA 扩展问题
【发布时间】：2019-03-20 20:16:03
【问题描述】：

我在this tutorial 之后使用 Phaser 2 创建了一个 PWA（这个是使用 Phaser 3 制作的）。

我对游戏在移动设备上的扩展方式存在疑问。在我的游戏中，我使用这些 Phaser 2 方法进行缩放：

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;

当我点击手机中的 localhost 链接时，游戏看起来太大了，我必须向下滚动才能看到它。当我“下载”它以像应用程序一样运行时，它一开始会摇摇晃晃，上下缩放，直到它稳定到正确的大小。游戏尺寸为 1280x720，在我将其转换为 PWA 之前，它在网页和移动设备上都非常漂亮。

我在 Chrome 的开发工具中对 PWA 进行了审核，它显示了以下通知：视口大小为 1280px，而窗口大小为 412px。

我尝试了here 和here 的解决方案，但没有帮助。一定是别的东西。

你知道是什么原因造成的吗？

【问题讨论】：

标签： progressive-web-apps phaser-framework

【解决方案1】：

这是我通常为 Phaser 3 做的事情，但即使您使用的是 Phaser 2，您也可以尝试在 Phaser 2 的功能之外调整 canvas 的大小。

来自 Emanuele Feronato 的How to scale your HTML5 games if your framework does not feature a scale manager – or if you do not use any framework：

/**
 * From https://www.emanueleferonato.com/2018/02/16/how-to-scale-your-html5-games-if-your-framework-does-not-feature-a-scale-manager-or-if-you-do-not-use-any-framework/
 */
function resize() {
    const canvas = document.querySelector("canvas");
    const width = window.innerWidth;
    const height = window.innerHeight;
    const wratio = width / height;
    const ratio = Number(gameConfig.width) / Number(gameConfig.height);
    if (wratio < ratio) {
        canvas.style.width = width + "px";
        canvas.style.height = (width / ratio) + "px";
    } else {
        canvas.style.width = (height * ratio) + "px";
        canvas.style.height = height + "px";
    }
}

window.onload = function(){
    // setup your game here
    resize();
    window.addEventListener("resize", resize, false);
}

【讨论】：