My game is not scalling on mobile devices

[plicatibu]

Hi, all.

 

i made a very simple game and it's not working as expected (regarding its scaling).

 

I set up it to have the following dimensions: 720x480 using code bellow

var game = new Phaser.Game(720, 480, Phaser.AUTO);

The point is that on mobile devices it doesn't fit wll in the screen.

 

At first I was using the following meta tag in the index.html:

<meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=0, width=device-width' />

In this case the image where bigger than the screen so I changed it to

<meta name='viewport' content='user-scalable=0 />

Now the game is lower than the screen.

 

Notice: I also added the code

this.game.stage.scale.startFullScreen();

to the create method of my preloader state.

 

I tried it in the following devices / browsers

 

Sony Ericson Xperia X8

• Stock browser
• Opera browser

 

Motorola Razor i XT890

• Stock browser
• Opera browser
• Firefox browser
• Chrome browser

 

iPhone 3GS iOS 6.1.3

• Chrome browser

Could some one tell me what is going wrong?

 

My game is here.

 

Thank you all.

[Vidsneezes]

Have you tried setting the 
Scale mode to  Phaser.StageScaleMode.SHOW_ALL

[plicatibu]

Vidsneezes, thank you for replying.

 

I think I'm missing something but I don't realized what it is. I expected to see my game fills all available space.

 

My code is as shown below:

        this.game.input.maxPointers = 1;        this.game.stage.disableVisibilityChange = true;        this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;        this.game.stage.scale.minWidth = 480;        this.game.stage.scale.minHeight = 260;        this.game.stage.scale.maxWidth = 1024;        this.game.stage.scale.maxHeight = 768;        this.game.stage.scaleMode.forceLandscape = true;        this.game.stage.scale.pageAlignHorizontally = true;        this.game.stage.scale.setScreenSize(true);

When I use the

this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;

the game looks like the following (notice the white areas marked in red)

 

 

If I change the code to

this.game.stage.scaleMode = Phaser.StageScaleMode.EXACT_FIT;

the game looks like the following (again, notice the white areas marked in red):

 

 

 

Any advice are very appreciated.

 

Regards.

[haden]

Add the following to your index.html head section:

<style type="text/css">	body { padding: 0; margin: 0; }</style>

[plicatibu]

Thank you for helping me.

 

I did it but I saw no difference.

 

 

 

Add the following to your index.html head section:

<style type="text/css">	body { padding: 0; margin: 0; }</style>