This will be an on going list of HTML5 features that can be used on the mobile web today!.
Meta Tags
Note: some of these are iPhone specific, but it wont break your page on Android or Windows devices.
[code lang=”js” autolinks=”false” classname=”codeClass” collapse=”false” firstline=”1″ gutter=”true” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″]
// This disabled pinch/zoom (works in all devices)
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
// This meta tag makes your web app fullscreen when you have saved it to your home screen (iOS only)
<meta name="apple-mobile-web-app-capable" content="yes">
// This just makes the status bar a different color. I have it set to black here. (iOS only)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
// This tag adds homes screen icon. (iOS only)
<link rel="apple-touch-startup-image" href="icon.png" />
// This tag adds is used to add a launch screen before your app is fully loaded. (iOS only)
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="icon.png" />
[/code]
More information about some of the iOS specific ones can be viewed here.
Storage
There is a good article over at HTML5 Rocks that better covers this area.
Events
There are several good javascript library’s that handle touch events. Below is a few of them.
