HTML APIs for touch devices?

Question

What HTML APIs are available for touch screen devices (e.g. tablet PCs)? I notice that GMail's iPad interface (and other mobile interfaces) doesn't scroll down in a normal web browser (pretending to be an iPad via a user-agent hack). How can one access this API on a PC?

I have a school full of tablet PCs that aren't wonderful in tablet mode due to lack of application support, but there looks to be an increasing number of web-based apps that will fill this gap.

Answer 1

In most cases, the webapps are using touch-based javascript events (touch, touchstart, touchend) which (for obvious reasons) are not implemented on Desktop browsers.

Check out PPK's compatibility table for details: http://quirksmode.org/mobile/tableTouch.html.

He also has a demo which shows the touch events in use: http://quirksmode.org/m/tests/scrollayer.html. There's a link on that page for a "variant" that works on desktop browsers. That's the one you need.

Answer 2

You can use, as you've already stated, UserAgent, to present content laid out specifically for certain devices.

For each, device, you'll have to read its documentation on how to write HTML in order to make the device behave as you want.

For example, here's how you would do it for an iPhone/iPodTouch. Here's for iPad. Similarly, depending on the device you have, you will be able to find proper documentation.

There is an awesome open database that can help you get device information based on user agent. It's called WURFL.