Screen Resolution On A PhoneGap App

Question

I\'m writing a Phonegap (3.2) app, I take a HTML5 canvas, make it full screen and the whole app UI is on this canvas.

Using a Samsung Galaxy S4 (Android 4.3) to test

Answer 1

window.innerWidth and window.innerHeight don't necessarily give you the real screen dimensions.

Try this instead:

windowWidth = window.screen.innerWidth; 
windowHeight = window.screen.innerHeight; 

target-densitydpi in the meta tag in Miko's post is deprecated in Chrome and should not be used.

Instead, try the following:

index.html:

You should also consider using Phaser's methods for scaling, like this:

Boot.js:

var game = new Phaser.Game(1080, 1920, Phaser.CANVAS, ''); //or AUTO mode for WebGL/DOM

For performance, use the smallest dimensions that you can regardless of the device's resolution. Let Phaser create the canvas object.

Game.js:

this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; //or SHOW_ALL or RESIZE
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;

Your entire canvas will scale automatically by the ScaleManager, but this slows the app down when performance is needed -- especially with a large canvas. EXACT_FIT will stretch the canvas, while SHOW_ALL will resize it so that the whole canvas fits onto the screen without changing its aspect ratio (which can leave margins like the one you have).