I am trying to create an HTML5 game that I would like to use in modern desktop browsers, as well as as many smartphones on which I can take my hands on. At the moment, this means the iPhone 3/4 and a couple of androids ...
This game is basically a canvas, which should occupy the entire screen, which I manually change (handling the onResize event) as follows: (this is what I found to work best, through trial and error, if you have any or tips, I would like to hear them!)
- For desktop browsers: canvas.width / height = window.innerWidth / Height
- For Android: same, but I add (outerHeight - innerHeight) to the height of the canvas, and I scroll down to compensate for the top panel.
- For iPhone 3: Same as Android, but instead I add hard-coded 60 pixels.
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 the iPhone 4 ... Setting up the iPhone 3 I mentioned above works fine, but it displays in low resolution and looks like crap. I could not successfully do this in full resolution Retina, without scrolling and (this is the key), responding to the rotation of the phone.
The closest I set
<meta name="viewport" content="width=640, initial-scale=0.5 (etc)" />
And setting the canvas to the outside width and height of the window instead of inside. It looks great from the start; however, as soon as I turn the phone, it becomes spoiled, and if I turn it back to the portrait, it will spoil it even more.
Surprisingly, the update does not fix, I need to change the "initial scale" in the meta-view window to 1, update, and then return to 0.5 and update again.
Is there a way to do what I'm trying to do?
Thank you very much!
Daniel