Optimize website for touch devices
- by gregers
On a touch device like iPhone/iPad/Android it can be difficult to hit a small button with your finger. There is no cross-browser way to detect touch devices with CSS media queries that I know of. So I check if the browser has support for javascript touch events. Until now, other browsers haven't supported them, but the latest Google Chrome on dev channel enabled touch events (even for non touch devices). And I suspect other browser makers will follow, since laptops with touch screens are comming.
This is the test I use:
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
The problem is that this only tests if the browser has support for touch events, not the device.
Does anyone know of The Correct[tm] way of giving touch devices better user experience? Other than sniffing user agent.
Mozilla has a media query for touch devices. But I haven't seen anything like it in any other browser:
https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled
Update: I want to avoid using a separate page/site for mobile/touch devices. The solution has to detect touch devices with object detection or similar from JavaScript, or include a custom touch-CSS without user agent sniffing! The main reason I asked, was to make sure it's not possible today, before I contact the css3 working group.
