Search the Community

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.