Redirecting A Website For Mobile Devices

Share This:

Have you ever gone on a website from your smart phone and noticed that it looked different on your computer. The reason this is is because these sites actually two different sites. The sites are most of the times stored in two different locations. For example if you go to www.facebook.com you will get the desktop version of Facebook. But if you go to m.facebook.com you will get the mobile version of Facebook. What website developers do is build two complete different sites. One that looks good on a desktop and another that looks good a mobile device.




The problem that developers face is getting users on mobile devices to automatically get redirected to the mobile version of the site. Their are several ways to do this. We can add code to our site that will recognize the size of the screen. So if a devices screen is less then or equal to a certain size the user will be redirected to the mobile site. Such a code will look like the following.


<script>
<!--
if (screen.width <= 699) {
document.location = "http://mobile.mysite.com";
}
-->
</script>

The above code will redirect the site if the screen that is displaying the site is less then or equal to 699px in size. This used to be okay for a while. And you still should use it. However what if your screen resolution is higher then that and your using a mobile device. You know some of your features on your site wont work properly without a mouse. And then of course their are tablets that have mobile OSes on them.




Another solution is to make your website recognize that the web browser user agent. For example we know Apple iPhone, iPod Touch, iPad, iPad Mini have safari by default. We can add some code to our site that will find out the user agent, and if it is a mobile user agent it will redirect the viewer to the correct location. To add a user agent recognizer to your site you would use the following code.

<script>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
location.replace("http://ios.mysite.com");
}
-->
</script>

The above code has it’s own set of issues. For example we will have to know each user agent and add it to the code. This is an even bigger problem if your expecting Android users on your site. Since Android users can easily set their prefered default web browser. The user may be using Browser, Chrome, Firefox, Opera, Dolphin or what ever else. This means we will need to add all those user agents as well.




Adding a whole bunch of user agents to your code could become to big and to tedius. Another solution would be to add the following code for Android users.

<script>
<!--
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "http://mobile.mysite.com";
}
-->
</script>

The above code identifies the Operating System itself and not the user agent. This is great for sites that have a lot of Android visitors.

Their is nothing wrong with adding all 3 scripts to the same site and same modem. For example

<script>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
location.replace("http://ios.mysite.com");
}
else if (screen.width <= 699) {
document.location = "http://mobile.mysite.com";
}
else if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "http://mobile.mysite.com";
}
-->
</script>

You can pretty much add User Agent URL Direct codes like the ones I mentioned here for pretty much any User Agent or Device. Below is a list of User Agents and codes I have used and know that work.


( (navigator.userAgent.indexOf('webos') != -1) ) <!-- For WebOS Phones -->
( (navigator.userAgent.indexOf('symbian') != -1) ) <!-- For Symbian Phones -->
( (navigator.userAgent.indexOf('blackberry') != -1) ) <!-- For BlackBerry Phones -->
( (navigator.userAgent.indexOf('winphone') <!-- For Windows Phone -->

 

 

One thought on “Redirecting A Website For Mobile Devices