Looking to extend my “HTML5 Canvas Panorama Viewer” to make it work on mobile phones, I’ve started to dig into the wonderful world of incompatible touch events between all the browsers. It’s IE vs. WebKit vs. Gecko vs. Opera, or back to the 90s in other words.

Peter-Paul Koch site quirksmode does a good job of summarising the various aspects of mobile web development.  In particular, the touch table is relevant to what I wanted to achieve. However, it does not look too promising right now, as most events are listed as either no supported, or incomplete.

Still, an old tutorial by nroberts, “Touching and Gesturing on the iPhone” gives hope. It includes a small example (http://tinyurl.com/sp-iphone) which actually do work to some extent on both the Android¬† native browser, and Firefox 6.

Now the challenge is to combine it all, and have both desktop and mobile browser behave in an expected and functional manner. Using the same events for the same actions does probably not make sense, however the user should be able to achieve the same across all browsers. The panorama viewer needs only three actions: zoom in, zoom out, and move. Zoom in already works, move works but is buggy, and some touch gesture must replace right-click to zoom out. I’ll come back to this later.