It's generally much safer to check the browser's user-agent, as then you will know whether they are on an Android, iPhone, iPad, iPod, Nokia, ..., and you are given greater flexibility to direct the user from there. I use the following Javascript (probably borrowed from another source):

 var isMobile = function() {

   console.log(Navigator:  + navigator.userAgent);

   return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent);

 };

Screen width is an available technique. I usually see this used with CSS Media Queries, changing the content based on device-width and device-height. E.g.

 @media only screen and (max-device-width: 480px) {

   /* For small devices, just CSS */

 }

To go with the technique of screen width / height, this is from Mozilla docs:

 // crude way to check that the screen is at 1024x768

 if (window.screen.width < 1000) {

   // resolution is below 10 x 7

   window.location = 'm.mysite.com'; //for example

 }

Here is an in-depth list of mobile screen resolutions.

A few caveats:

1. If a user goes to www.yoursite.com/events/15, you are going to forward the user directly back to m.yoursite.com. This can be very frustrating when trying to visit a link on a mobile device. You should try to reconstruct the proper URL either by a Javascript library (see Crossroads.js) or on the server using a redirect.



2. As mobile devices get better at rendering and interaction, be aware that oftentimes users may prefer to see the original site instead of the mobile site, full stop. Try to provide a method back to the main site.

   
   
   

   Hope this all helps you suss out your solution!