Tutorial: Detecting mobile devices

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 3.50 out of 5)
Loading ... Loading ...

Today, nearly everyone has a smartphone, tablet or other mobile computing device. Unfortunately websites designed for large screen browsing do not display very well on these devices because of screen size constraints and other interface limitations. In addition, the Flash player is not universally implemented in all mobile devices (eg iPhones and iPads). This article discusses various techniques that can be used to detect a mobile device and then automatically re-direct the user to a mobile device specific landing page.

The techniques include:

  • Manual Selection
  • User Agent information via Java and
  • User Agent information via Server Detection

Manual Selection

This is the easiest method to implement. Simply add a link at the top of your website that points to the Mobile Landing Page. The link should exist within the html (not Flash) section of your website.

User Agent

The remaining approaches rely on interpreting the user agent information. The table below shows the information returned from some common browsers on different devices:

IE 9.0 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Chrome Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.168 Safari/535.19
Firefox Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0
HTC Desire Mozilla/5.0 (Linux; U; Android 2.3.3; en-vn; HTC_Desire_A8183 V2.26.841.2 Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
iPhone Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

If the words Mobile, iPhone or iPad appear in the returned string, there is high probability that the device is a mobile device. Should a specific mobile device not be identified, modify the sample scripts below to search for specific string that may appear in specific mobile devices that you wish to target.

Java

Use navigator.userAgent to obtain information that is sent back to the server about the web client.

One possible issue with this approach is that the mobile device does not support Javascript. For this reason, the Server Detection methods are generally considered more reliable.

<script type="text/javascript">
var ua=navigator.userAgent;
if (ua.indexOf("Mobile")!=-1) window.location = "http://www.mysite.com/mobile.html"
if (ua.indexOf("iPad")!=-1) window.location = "http://www.mysite.com/mobile.html"
if (ua.indexOf("iPhone")!=-1) window.location = "http://www.mysite.com/mobile.html"
</script>

Server Detection (php)

php is the server side scripting language generally available on linux servers.

<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/Mobile|iPhone|iPad/',$ua)) header("http://www.mysite.com/mobile.html");
?>

Server Detection (asp)

asp is available on Microsoft servers.

<%
dim u
set ua=Request.ServerVariables("HTTP_USER_AGENT")
set b = new RegExp
b.Pattern="Mobile|iPad|iPhone"
if b.test(ua) then response.redirect("http://www.mysite.com/mobile.html") end if
%>

Mobile Landing Page

For maximum compatibility, the mobile landing page should have the following attributes:

  • Authored in html
  • Smaller than typical desktop width, eg 250 pixels.
  • Logo image typically 250×85
  • Essential content only such as: Company / item description, Company address / phone number and Link to desktop web page
This blog article, provides an in depth discussion on how to author and size a page for a mobile site. If you don’t want to go to that level of detail then simply define a default mobile width such as 250, 320 or 640.

 

 

Tags: , ,

4 Responses to “Tutorial: Detecting mobile devices”

  1. By far the best solution that I found was this amazing PHP script
    http://code.google.com/p/php-mobile-detect/

    It’s called mobile detect and the script is constantly updated.

    It can even detect mobile and tablets.

    Easy to use !

  2. Philip says:

    Thanks, this javaScript worked for me :)

  3. Paul Brown says:

    Hi. I’m wondering how I would go about adding this script to a WordPress blog (hosted on my own domain). Is there perhaps a plugin which will do the same job?

  4. What about htacess detection, with rewrite condition and rewrite rule


Switch to our mobile site