Mobile redirect using screen resolution

Question

I advertise a company, basicaly I'm an affiliate. I want to redirect my mobile viewers to the mobile version of my affiliate website. I'm thinking of doing this with screen resolution. Basicaly, if the screen resolution is unde 800 x 600, chances are big the guest is using a mobile phone.

Is this a good ideea?

Here is the code:

if ( (screen.width < 800) && (screen.height < 600) ) { 
    window.location = 'mobilesite';
    } 

Ty!

Answer 1

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!