How to Detect a TouchScreen Phone for Mobile Site

I have two mobile pages, One designed for touchscreen phones and one designed for non-touchscreen phones. I need to detect and redirect based on which type.

I'm trying to brainstorm here. I thought about possibly detecting screen resolution and using that but phones like the Blackberry Bold (non-touch but with 480x320 display) don't fit into that rule.

The obvious solution is to maintain two lists of user agents and use them to redirect. The problem is, it would be pretty time consuming to create those lists. I also imagine that once I start looking into it there would run into all sorts of exceptions where a browser like opera mini is on two sets of phones (one touch and one non-touch). If this is my only option, any idea where to start with gathering the data about the phones?

var touchScreenRegEx = new RegE开发者_如何学编程xp("(ipod|iphone|opera mini)");
var noTouchScreenRegEx = new RegExp("(blackberry|palm)");

var userAgent=navigator.userAgent.toLowerCase();
if (userAgent.match(touchScreenRegEx))
{        window.location = "/mobile/touch/"; 
} 
else if(userAgent.match(noTouchScreenRegEx)
{
   window.location = "/mobile/no-touch/";
}

Any Suggestions?

"The obvious solution is to maintain two lists of user agents and use them to redirect"

What you want is WURFL:

http://wurfl.sourceforge.net/

Keep in mind that there are phones that are both touch AND keyboard accessible, so Ideally, you'd try and avoid making two separate interfaces if you can help it.

For a good overview of the start of the art check out:

http://yiibu.com/articles/rethinking-the-mobile-web/

In summary though, using WURFL or DeviceAtlas to infer touch support based on the user agent is probably the simplest and quickest way to get done what you're looking for.