Cant quite nail an issue with Scaling the game on mobile. Its not showing all of the game but only part of the game

[kriket]

Its a tiny game code which I have uploaded on http://scaleissue.site44.com/ so pls use browser dev tools to have a look. 

As you will notice when u go to dev tools and choose mobile emulation (iphone 4, 5, 6 - landscape orientation only), the screen only shows the top-left corner of the actual game with scroll bars when in fact it should have scaled the game such that all of the game was being shown on the screen since I used            

            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

 (you might have to reload page to notice this issue when in dev tools). I tried the game on real mobile and still the same issue. 

All relevant scaling code is under boot.js

 

Please help as I cant quite nail the issue having tried several scaling modes. 

 

 

[Gob0]

I've tested on Chrome v46 (Linux Debian), you game works without problem in emulation mode (iphone 4 + 6, landscape).

 

[kriket]

it didnt scale fully on mine and a friends mobile. Also didnt scale properly on emulator either. check screenshot. (PS - this is not resizing the window, resposive design. Its actually reloading the whole page on say emulator or loading on say android mobile browser that shows the issue like in screenshot below)

[drhayes]

I don't have any answers for you, but I can repro this in Chrome 49 and in Chrome on my Nexus 6. But no idea around the scaling. I didn't see anything in your code that suggested problems, either.

If you upgrade Phaser to 2.4.3 does the problem go away?

[kriket]

 

Quote

 

If you upgrade Phaser to 2.4.3 does the problem go away?

 

 

 Like this

It didnt go away. I have put Phaser v2.4.4  in there now. Still the issue. Just dont understand why this is happening? 

[Gob0]

Well, i tried again and result is the same: your game is resized as expected.

(i press F12, choose Apple Iphone 5 & reload page) 

[kriket]

hmmm... now this is a real headscratcher. I cant release a game that sometimes scales properly, sometimes doesnt. 

[kriket]

I would really appreciate if Rich or a fellow dev can confirm whether this could be a bug in the framework itself or not?

 

 

[kriket]

*First and Last Polite Bump*

 

 

[Bloodcake]

I'm just going to point out what I would do in this case; I would look through some tutorial on scaling that works and make a much simpler test, maybe just the background image and try to scale that. 

What I can say though is that your aspect ratio is pretty strange, 1024x480 is not something standard. Maybe try with different aspect ratios? Try a 16:9 one.
     

[kriket]

Yeah, the funny thing is Scalemanager.SHOW_ALL certainly doesnt do this "Show the entire game display area while maintaining the original aspect ratio."

Its frustrating.

At worst I was just expecting black bars on some devices. But its ridiculous when the game isnt scaling at all on any device, high dpr or not. 

 

[Rebecca]

Have you found a fix for this issue?

I haven’t touched my game in a couple of months and suddenly it starts doing this on Android while it’s fine in emulation on desktop as described above.

[Rebecca]

I’ve fixed my issue. Turns out I was missing the maximum scale in the viewport meta tag. The following tag scales the game correctly.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Try adding that to your game and see if it helps.

Correction:

The solution above worked for a couple reloads and then I was back to the wrong scale (however that happened). What actually works is adding the meta tag at runtime and setting the scale to 1 / window.devicePixelRatio.