7

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" />
Skylervich
  • 150
  • 1
  • 8
  • Maybe this can be useful to understand how the thing works :) https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html – Mariano Montañez Ureta Nov 11 '11 at 06:43

1 Answers1

4

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?

Community
  • 1
  • 1
Daniel Kurka
  • 7,973
  • 2
  • 24
  • 43
  • Daniel. Thank you for your response. This is an iPhone4 and window.devicePixelRatio is returning the value of '1'. I'm still not following of how to make the iphone4 utilize it's full capability of displaying a larger 960x640 canvas. – Skylervich Nov 10 '11 at 22:46
  • that is weird, the only thing i can think off is that the scaling factor on your viewport meta tag somehow influnces this. can you set it to 1.0 and try again? – Daniel Kurka Nov 10 '11 at 22:49
  • I've set viewport meta to 1.0, and tried completely removing it. In both cases window.devicePixelRatio = 1 and canvas looks huge on the iPhone, almost twice the size of the screen. – Skylervich Nov 10 '11 at 22:58
  • Oops, after I changed the simulator to iPhone(Retina) and exported to actual iphone4, window.devicePixelRatio is saying 2. Which makes sense, because that's exactly what I'm seeing. It's upscaling the canvas by the factor of two. How do I stop it? – Skylervich Nov 11 '11 at 00:33