However to get it to run optimally there's some issues I ran into and I haven't seen a topic about those yet.
We know you can play a HTML5 game on your iPhone in its browser, but I wanted to make it full screen, just as if it's an app you could find in the app store. Here's how!
Step 1
Make a game / anything with a resolution of 320 x 480
Make sure it is controlled by mouse / tilt / not keyboard
Create the application
Step 2
Next we need to edit the index.html file, open it in a text editor.
We will change this line:
Into this:<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
This will make the iPhone's top status bar half transparent so we can see all of the game.
Step 3
By default, the game will not fill the screen exactly, because there is a small margin around the canvas element.
We can change this by adding the following code somewhere between the <head> tags in the html:
Next put the canvas element between <div> tags, like so:<style type='text/css'>
div {position:absolute;left:0px;top:0px;width:100%;height:100%;}
</style>
And finally right beneath that:<div><canvas id="canvas" width="320" height="480">
<p>Your browser doesn't support HTML5 canvas.</p>
</canvas></div>
This will make sure the game fits the screen exactly. (There's probably some other ways to do this as well).<script type="text/Javascript">
//get div to gain access to window size
div=document.getElementsByTagName('div')[0]
//set canvas size to the whole window
canvas=document.getElementsByTagName('canvas')[0]
canvas.width=div.scrollWidth
canvas.height=div.scrollHeight
</script>
Step 4
Put your files somewhere online.
Navigate to the URL on your iPhone.
Use the option "Add to home screen" in your iPhone's browser.
Done! You can start the app from your iPhone's home screen and in full screen!
Tip: You can also create an icon for your app, as described here (step 3).
----
Hope this is helpful. I just figured this out and haven't really actually tested many ideas with it but if I do I'll post a link.
Edited by 2Dcube, 30 September 2011 - 02:57 PM.
