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

A solution that is working with both resolution and touch event issue (that came with Ken's post):

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

In the < head >

Thanks Ken for trying to help bro :))

Answer 2

Try something like this:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var pixelRatio = window.devicePixelRatio || 1; /// get pixel ratio of device

canvasMain = document.getElementById("canvasSignatureMain");

canvasMain.width = windowWidth * pixelRatio;   /// resolution of canvas
canvasMain.height = windowHeight * pixelRatio;

canvasMain.style.width = windowWidth + 'px';   /// CSS size of canvas
canvasMain.style.height = windowHeight + 'px';

(or an absolute value for the css rule).

On devices where the pixel ratio is higher than the typical 1:1 you get a higher resolution canvas. For normal circumstances everything is as normal.

Answer 3

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:

<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui" />

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).