Simplest/best way to make an existing ASP.NET/jQuery site show more suitable UI on smartphones

I have some existing (largish) ASP.NET web applications that people are starting to visit using smartphones.

I'm looking at ways to detect what kind of device they're on and make simple changes to the UI, something like:

Oh! You're an iPhone! Alright, let's just shrink the page's header - title and logos and stuff - and increase the font and button sizes a bit.

I've been looking at using either ASP.NET or jQuery to detect what kind of device they're browsing with, then change styles client-side (using a few jQuery statements, or by adding an additional .css file, or changing stuff on the master page if I really have to).

Problems:

1. How to detect? I thought this was easy: browser window resolution. But it's not that simple: newer smartphones now have some pretty hi-res screens, and netbooks have some pretty low-res ones. So if I just said "1024x768 or lower = smartphone", that would incorrectly identify 7" Netbooks at 800x480 (which could easily handle the normal, non-mobile version of my site). This will only get worse in future as a larger po开发者_如何学运维rtion or smartphones catch up to typical low-end laptop resolutions. There's no way to (reliably!) tell the physical screen size (in cm or inches) is there?

2. How to implement? Can I apply a whole stylesheet file with jQuery? has anyone done this? I can do it server-side, but does this limit my detection options?

(If this exact question has been asked before, please let me know, couldn't find anything).

How to Detect:

This site seems to have a comprehensive detection scheme: http://detectmobilebrowser.com/

How to implement:

(Doesn't actually fit OP's situation, only suitable for very large companies or those offering very limited mobile access).

I think the general practice is to have two separate versions of your website, one that works well for desktops and one that works well for smaller devices. When they load your website you check their user agent and if it is a mobile device you redirect to your mobile version.

Some examples of how people layout mobile versions:

• http://www.amazon.com/mobile
• http://www.google.com/m
• http://mobile.twitter.com//
• http://m.cnn.com/