Will5 Posted May 10, 2018 Share Posted May 10, 2018 This topic has been discussed many times here, but unfortunately no solution has worked for me. I uploaded a game on Facebook Instant which works well on desktop but looks bad on mobile. Initially, I was using the following code: var game = new Phaser.Game(1080, 1920, Phaser.AUTO, null, {preload: preload, create: create, update: update}); This is the scale mode: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; As you'd expect, I ended up with vertical white bars left and right. After days of googling and testing, I tried many other solutions which did work. I even tried using window.devicePixelRatio but I had no luck; it seems as if this code was ignored on mobile. I also tried the following but nothing worked: var game = new Phaser.Game(1080, 1920, Phaser.AUTO, null, {preload: preload, create: create, update: update}); var game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.AUTO, null, {preload: preload, create: create, update: update}); So before giving up, I thought I'd ask you guys for help. Thanks in advance. Link to comment Share on other sites More sharing options...
Will5 Posted May 11, 2018 Author Share Posted May 11, 2018 I'm happy to say that I found the solution. All I had to do is place the game inside a DIV container. Everything worked smoothly after that Fenopiù 1 Link to comment Share on other sites More sharing options...
sathyaraj Posted May 16, 2018 Share Posted May 16, 2018 Hi @Will5 Can you show that piece of code. Even I am struggling with the same. Thanks in advance Link to comment Share on other sites More sharing options...
Will5 Posted May 18, 2018 Author Share Posted May 18, 2018 Hey@sathyaraj , sure thing: This was inside my JS file game = new Phaser.Game(gameWidth, gameOptions.gameHeight, Phaser.CANVAS, 'canvas', {preload: preload, create: create, update: update}); This was in my HTML: <div id="canvas"></div> sathyaraj 1 Link to comment Share on other sites More sharing options...
matias_ini Posted May 22, 2018 Share Posted May 22, 2018 You can do it very easy in this way: game = new Phaser.Game ('100%', '100%', Phaser.CANVAS); Then you can get the real width and height reading game.width and game.height Link to comment Share on other sites More sharing options...
Recommended Posts