We've got an alternate version of out website ready for mobile devices. The content we serve is different and it works well.
What is the best way to detect which version to serve. We don't have a list of all mobile devices so to use the user-agent header is tricky as we may miss something.
We thought about useing device screen width - but what happens if the mobile device doesnt support javascript. How do we sniff this ?
I don't think there is a good/elegant way to detect if user has his javascript activated.
IMO, the best is to list the user agent : here is a User-Agent list, which seems quite complete (in French, sadly).
You could use a device description database (such as WURFL) which will recognise the client device from the request headers. You can then query that database to decide if the device can handle your site (e.g. support javascript, or is the screen big enough) before deciding whether to redirect them to a different site.
You don't mention your environment, but WURFL supplies APIs for Java and PHP, and maybe others as well. If there's no supplied API, you can still use WURFL, but you'll have to parse and process the XML data yourself.
Agreeing with Skaffman, another device database is DeviceAtlas. You have to pay for this one though.
I had the same query till 3 days ago. But I am glad I finally figured out the code to redirect users to my mobile website subdomain when browsing from mobile device. I have written all the instructions with my code for download - free to use for personal or commercial use! Check it out here: http://www.deshmukhelectric.com/engineering/?p=34
Simple: < link rel="alternate" media="handheld" href="WEBSITE HERE">
put that in the head section (without the space before "link")
media="handheld" doesn't work with modern smartphones like the iphone which pretend to be a desktop browser (uses the screen media type).
http://detectmobilebrowser.com/ Free & open source, has a comprehensive mobile user-agent checker available in many languages - javascript, php, asp.net, ruby, etc.