Jump to content

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


Recommended Posts

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. 



Link to comment
Share on other sites

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)

Screenshot from 2016-02-12 15:28:18.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 


Link to comment
Share on other sites

  • 4 weeks later...

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.


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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...