2.2.1 SHOW_ALL not scaling properly in mobile?

[mariogarranz]

I'm using my own code to resize the game depending on the window size to match its aspect ratio, and then rely on SHOW_ALL to do the CSS scaling. The aspect ratio match has some limits, and will never create a landscape view wider than 4:3, that's why I use SHOW_ALL.

The scaling works just fine when done in desktop browsers, but when used on mobile browsers it seems to be behaving like EXACT_FIT. Even if I use Chrome's developer tools to emulate a mobile device I get the wrong behavior.

 

Any idea on what may be going on? Did I miss something with this version update?

[spencerTL]

Assuming you are using the newest version of Phaser:

When you create your game are you naming a div? This is an easy to miss change. If you name it you have to control it yourself. Try setting the parameter in the creation for the div to ' '. In earlier versions of Phaser the templates would insert game in here and all would be well but the new scale manager is different

[mariogarranz]

Assuming you are using the newest version of Phaser:

When you create your game are you naming a div? This is an easy to miss change. If you name it you have to control it yourself. Try setting the parameter in the creation for the div to ' '. In earlier versions of Phaser the templates would insert game in here and all would be well but the new scale manager is different

Yeah it's probably this, the div is called 'game', but if I don't name it, how can I tell Phaser where it must create the CANVAS object?

I was upgrading from 2.0.4 so I guess I missed something in between such a big jump.

Thank you very much for your help

[spencerTL]

I think Phser creates a div for the canvas in whatever div you create the game. So if you're not creating any divs of your own one is created at the top level. If you create it inside one of yours then it is a child div of that. I'm not 100% on this tho as I always create it at the the top as I hate messing with the CSS and cross browser checking to get it right. I prefer to let phaser take the strain!

[mariogarranz]

I have tested replacing the code so the CANVAS is not created inside a div, just appended to the body, and I still find the same problem.

It's only happening with mobile devices, either emulated or physical, but the only reference to Device.desktop I can find in the ScaleManager class is to do scroll or not, so I'm not sure what's happening there.

[mariogarranz]

Well I tried updating to 2.2.2 and different changes, but it's still happening.

Works fine on desktop when I resize the window, but if I emulate a mobile device, or use one, it's using EXACT_FIT instead of SHOW_ALL.

[Daniel Belohlavek]

Please see: http://www.html5gamedevs.com/topic/11636-scaling-my-game/