Ok so I've been researching this for a while and seems there are a few ways to do this, CSS media queries that detect the screen size, htaccess and javascript.
I would prefer to go the htaccess route, because as far as I know, tablets now have 1024px resolution. Wouldn't this interfere with desktop resolutions? Also htaccess gives me the opportunity to make a whole new site for tablets and mobile browsers, but how do I go about detecting whether it's a tablet or a mobile? I don't want to have to detect if it's a Google Nexus vs an HTC Desire or iPhone, up against iPad, Acer Iconia, Xoom, etc.
Is there a way to detect a tablet, phone or desktop computer, without having to include every single make and model? (for example as here.)
I would suggest using Modernizr for this.
It uses Javascript on the client browser to detect support for a whole range of browser features, including touch events, and gives you CSS classes and a Javascript object which you can use to adjust your site to suit the user's browser.
I would always avoid doing browser detection on the server (ie in .htaccess or in your server-side code), because it's unreliable -- the data which the server can use to detect the client environment is sent as plain text and is easily spoofed or hacked. More importantly, it's also commonly suppressed by proxies and privacy apps.