Search code examples
javascriptcanvasfullscreenresolutioniphone-4

How can I have a full-screen canvas at full resolution in an iPhone 4?

I'm trying to create an HTML5 game, which I'd like to work in modern desktop browsers, plus as many smartphones as I can get my hands on to. For now, that means iPhone 3/4 and a couple of Androids...

This game is basically a canvas that should occupy the whole screen, which I manually resize (handling the onResize event) as follows: (this is what I found to work best, by trial and error, if you have any tips, i'd love to hear them!)

  • For desktop browsers: canvas.width/height = window.innerWidth / Height
  • For Android: same, but I add (outerHeight - innerHeight) to the canvas height, and I scroll down, to compensate for the top bar.
  • For iPhone 3: same as for Android, but I add a hard-coded 60px instead.

In all cases I have these meta-tags:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Now my big problem is iPhone 4... The iPhone 3 setting I mentioned above works perfectly, but it displays in low-res and looks like crap. I haven't been able to successfully make it show in full Retina resolution, without scrolling and (this is key) responding to the rotation of the phone.

The closest I got was setting 

<meta name="viewport" content="width=640, initial-scale=0.5 (etc)" />

And setting the canvas to the window outer width and height instead of the inner. This looks gorgeous initially; however, once I rotate the phone, it gets all screwed up, and if I rotate it back to portrait, it's even more screwed up.
Surprisingly, refreshing doesn't fix it, I need to change the "initial-scale" in the meta viewport to 1, refresh, and then back to 0.5 and refresh again.

Is there any way to do what I'm trying to do?

Thank you very much!
Daniel

Solution

  • You can try keeping the initial-scale=1, then set the canvas.width and canvas.height to be double the appropriate dimensions you've determined, and use CSS to set the CSS width and CSS height to be the correct size. This should give you a higher resolution canvas. The canvas.height and canvas.width properties set the actual number of pixels in the canvas, while the CSS height and width simply stretch (or in this case, compress) the canvas to a particular size.