Question

I was wondering if html5 is supporting touch functionality on a mobile device native? So we don't have to make an native app for iOS/Android/WP7 but can make an html5 page which loads in the mobile browser.

EDIT

I mean the JavaScript support for touch native in the browser so you can do you own thing with the touch in html5.

Was it helpful?

Solution

Depends on the type of touch event. For your standard browser click/mouse events these are emulated by the browser. As mentioned by Halst, just make your clickable elements big enough to work in a mobile environment.

If you want to use multitouch/gestures, it gets a little more interesting.

Webkit provides touchstart, touchmove, touchend, touchcancel. For single touch events support should be the same in both IOS Safari and Android Webkit. You could roll your own or use a library like jqTouch.

You can read more on how IOS Safari handles touch events. Events for Android don't seem to be as well documented, but you can read more on quirksmode touch support.

OTHER TIPS

Just make liks and buttons big enough, and that's it.

Somewhat.

It's possible to write a webpage that looks almost as a native app for iPad (including multi-touch) but I had to give up with using "high level" events and had to handle instead the touches array explicitly to get a reasonable zoom/pan. The results are IMO quite good (people I've shown that vector graphics editor toy thought it was a native app).

For Android however things are a little trickier because on my Nexus one apparently there is no way to get anything close to full-screen (and for a phone losing the address bar space means losing a LOT of space) and also multitouch is disabled in the default browser :-(

Both problems (fullscreen and multitouch) are however solved for example in Opera and this is in my opinion sad because (may be) this means they don't WANT good web apps on the phone...

So technically it's possible to write a single html5/js program that runs in both desktop and phone, but this doesn't of course mean that the best UI for a desktop app is also the best for a phone.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top