I'm using phonegap to export a very simple html5 page to an iphone app and running into this silly issue.
iPhone resolution is 960x640.
When I set the canvas to those dimensions, it seems way too big.
<canvas width="960" height="580" style="background-color:#607559"></canvas>
Why is that? And how can I utilize the full high definition capabilities of iphone4. It seems that canvas fits full-screen if I set the canvas to something of older iPhone(320×480).
Setting viewport to something like this seems to work, but will this be a performance hit?
<meta name="viewport" content="width=device-width, height=device=height, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
It depends about which iphone you are talking about.
The old iPhone 3GS has a resolution of 320x480. The newer iPhone 4 and iPhone 4s have the so called retina display, which has a resolution of 640x960, but it automatically scales up (you don`t access the pixels independently.
But you can set the device pixel ratio which is very good covered for canvas in this question: Canvas drawing and Retina display: doable?