[solved] Mobile viewport inconsistency

[FlopshotQQ]

Hey.

I need help, I've been banging my head against this for hours.

I've been scaling my game to fit screens on all devices, while maintaining the asset ratios. The game size increases so the controls work where ever you touch. I've run into an issue with Android/Chrome and itch.io. I'm not sure if it's specific to the browser, or the site, or mobile. It might be a full screen mobile issue all together, but  I'm testing it on itch and an android with chrome.

The first time the game loads it scales and works perfectly. Then, if I refresh the page or visit it later this happens:

The game gets put into the view port ratio set in Itch, and doesn't adjust like it should in fullscreen. This being 640x960. 2:3 ratio, the screen has a higher Y axis. This causes the white bar at the bottom which is unresponsive to the touch controls.

I've removed the padding in CSS:

      <style>
      html {
    margin:0;
    padding:0;
}
      body {
         margin: 0;
         padding: 0;
      }

      #canvasholder {
    width: 99vw;
    height: 99vh;
    margin: 0 auto;
}
      </style>

and my canvas code looks something like this:

// ~A Canvas and Game Setup

aspect_ratio = window.innerWidth / window.innerHeight;
testWidth = 960 * aspect_ratio;
//if the aspect ratio stretches the Y axis

if (testWidth <= 640)
{
  var canvasWidth = 640;
  var canvasHeight = 640/aspect_ratio;
}
// else if it stretches the X axis
else {
  var canvasWidth = 960 * aspect_ratio;
  var canvasHeight = 960;
}

//test versions
//var canvasWidth = 640;
//var canvasHeight = 960;

var game = new Phaser.Game(canvasWidth, canvasHeight, Phaser.CANVAS, 'game',
  { preload: preload, create: create, update: update });

function create() {

  // ~2.1 Game Scaling

  game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.refresh();

Maybe I've over complicated the original solution? This worked the way I intended on Desktop tests.
You can test it yourself here:
https://flopshotqq.itch.io/screen-scale-test

Thanks so much, any help is appreciated.

[FlopshotQQ]

I managed to find a work around myself. Figured I would post it here if anyone else ran into similar problems.

I don't know what the problem is, but after scouring the internet and days of testing I have a guess.
This seems to be a time based issue. It checks the window.innerWidth provided by the embedded container, in this case the one I set for itch.io, and scales to it before window.innerWidth is adjusted
by the phone going fullscreen. This doesn't explain why it works the first time you load the game though, and why it only fails after refreshing the itch.io page the game is embedded in. 

Either way I solved the problem by creating a function that restarts the game after a timer goes off. I removed any scaling calculations and
game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
from the original game declaration, and used '100%' so it loads (and fails) faster. 

The timer runs this function:

{
    aspect_ratio = window.innerWidth / window.innerHeight;
    testWidth = 960 * aspect_ratio;
    if (testWidth <= 645)
    {
      var canvasWidth = 640;
      var canvasHeight = 640/aspect_ratio;
    }
    else {
      var canvasWidth = 960 * aspect_ratio;
      var canvasHeight = 960;
    }


game.scale.setGameSize(canvasWidth, canvasHeight);
game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.refresh();
game.state.restart();
}

This works, despite not knowing 100% why. It's not perfect because you can see the game restart and the assets adjust. Though I'm just going to cover that up with a splash. 
This solution has been tested on PC, iPhone, and Andriod on many devices. The game scales as intended. 

Test it yourself here: 
https://flopshotqq.itch.io/screen-scale-test

Hopefully this helps someone 
Happy coding!