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

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.