Phaser PWA Scaling Issue on Mobile - progressive-web-apps

Question

I created a PWA with Phaser 2, following this tutorial (this one is made with Phaser 3).
I face a problem with how the game scales on mobile. In my game I use these Phaser 2 methods for scaling:
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
When I click the localhost link in my mobile, the game appears way too big, I have to scroll down to see it. When I 'download' it to act like an app, it gets shaky at first, scaling up and down until it settles to the correct size. The game dimensions are 1280x720 and looked very nice before I converted it to a PWA, both on web and on mobile.
I did an audit for a PWA in Chrome's dev tools and it showed this notification:
The viewport size is 1280px, whereas the window size is 412px.
I tried solutions from here and here but that did not help. It must be something else.
Do you have any idea what could be causing this?

Answer 1

This is something I usually do for Phaser 3, but even though you're using Phaser 2 you could try resizing the canvas outside of Phaser 2's functionality.
From Emanuele Feronato's 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);
}