How to Determine If a User is Accessing a Web Site Through a Mobile Device

With the explosion of smartphones, tablets and other handheld devices it is becoming more important than ever to determine what type of devices are being used to get to your data.  Furthermore; hiring a development team to build the same application for Apple, Android, and Microsoft is almost only dedicated to companies that are very large or those companies that are willing to lose money until they hit it big.  For the vast majority a solution is to develop a web application that fairly browser independent.  This article is not designed to show you how to build a mobile application (this might come in a later blog) but rather provide you with the first step in this journey.  This sample is to help in identifying whether a user is on your site by a mobile device or through a normal browser.  I have pulled together different parts of the web to provide step by step instructions to do the following:

  1. Determine browser type.
  2. Automatically redirect to mobile application.
  3. Allow user to go back to a “Normal” web site.
  4. Remember a user preference for the next time by the use of cookies.

Note:  Although I use .NET extensively; this sample does not include any Microsoft technologies directly.

We will use two HTML, and two JavaScript files.  We will discuss these a little later.  But let’s get started.

  1. Open up a blank .html file (you chose your development tool) and paste the following into it.
<script type"text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type"text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">

      (function (a) { jQuery.browser.mobile = /android.+mobile|KFJWI|KFJWA|KFOT|KFTT|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|silk|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)) })(navigator.userAgent || navigator.vendor || window.opera);

      /**
      * jQuery.browser.mobile <a href="http://detectmobilebrowser.com/">http://detectmobilebrowser.com/</a>)
      *
      * jQuery.browser.mobile will be true if the browser is a mobile device
      * <a href="http://detectmobilebrowsers.com/">http://detectmobilebrowsers.com/</a>
      **/
      if ($.browser.mobile == true && $.cookie('device') == null) {
           $.cookie('device', 'mobile', { expires: 90, path: '/' });
           window.location.replace("mobiledevice.html");
      }
      else if ($.browser.mobile == false && $.cookie('device') == null) {
          $.cookie('device', 'normal', { expires: 90, path: '/' });
     }
      else {
         if ($.cookie('device') == 'mobile') {
             $.cookie('device', 'mobile', { expires: 90, path: '/' });
             //window.location.replace("mobiledevice.html");
         }
         $("#mobileprefer").text($.cookie('device'));
     }
</script>

Let’s talk about the line of codes above.

Line 1 – References a jquery Library. (Use a cdn or local reference)
Line 2 – References to the jquery cookie library (This is used to help with cookie management)
Line 3 through 11 – This comes from a script that you can get the updated version for check here.
Line 12 through 25 – This is really the heart of the script. This checks to see if this is a mobile device and/or javascript is enabled.
If the browser is considered a mobile device then it sets a cookie for 90 days and redirects the page.
Line 24 can be commented out if you do not need to see on the screen the status of device.

Then copy the following write below the above

<script type="text/javascript">
     $(document).ready(function () {
          $("#divmobile").click(function () {
              $.cookie('device', 'mobile', { expires: 90, path: '/' });
              document.location.href = "mobiledevice.html";
              //$("#mobileprefer").text($.cookie('device'));
          });

          $("#divnonmobile").click(function () {
              $.cookie('device', 'normal', { expires: 90, path: '/' });
              document.location.href = "test.html";
              //$("#mobileprefer").text($.cookie('device'));
          });

          $("#divremove").click(function () {
              $.cookie('device', null);
              document.location.href="test.html";
             //$("#mobileprefer").text($.cookie('device'));
          });

          $("#ver").text(jQuery.browser.mobile);
     })
</script>

The script above is attaching click events to the three options. The first set is specific to change to mobile page. The second click text Allows a user to change to the “normal” web site and store it for 90 days. The final click event removes all cookies for this preferences and redirects to the normal page.

In the body of your html then add the following;

<div id="divmobile">Change to mobile</div>
<div id="divnonmobile">Change to normal</div>
<div id="divremove">Remove cookie</div>
<div id="mobileprefer"> </div>

These are just the text holders for holding the click events created from code block #2. You can use this code anyway you want. In fact, I encourage you to do something like Yahoo does with their mobile.yahoo.com (subdomain). The options are limitless.

Two points to remember;

1. Let me say that you can find a multitude of different ways to implement this type of “smart” navigation but I have found this one to work as good as anything else. I also use this because almost all the sites that I build have jquery as part of the framework to the site. Once this is implemented the overhead is very small. With this said, let’s talk about some key points to this examples.

2. In my test of the different browsers I realized that the Kindle devices are not picked up so I had to make a tweek to the javascript in step one to add the following;
KFJWI|KFJWA|KFOT|KFTT (Click Here)

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , | Posted under ASP .NET 2, ASP .NET 3.5, Mobile | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


4 × = 36

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>