Mobile Device Detection and Redirection with PHP

** Updated 04/26/2010 **  Added Google Mobile Crawling Detection
See also http://www.mlynn.org/2010/07/mobile-device-detection-and-redirection-with-perl-and-cgi/ for additional information on Mobile Browser Detection and Redirection using Perl / CGI.

Target Audience

Web Content Publishers, Web Server Administrators and anyone considering preparing and publishing content that may be consumed by users with mobile devices.

Overview

The mobile phone and computing market is exploding. With more and more phones and hand held devices gaining web browsing capability, it only makes sense to ensure that your site is at least viewable by these mobile browsers. In this article, I present one possible solution for detecting and redirecting incoming mobile browsers so you can customize and enhance the mobile users’ experience.

In this article, I’ll discuss an example web site where we want to present customized web content to four distinct types of user based on the browser device their using when they visit the site. I’ll also discuss how to enable the users to specify a preference for one of the other versions of the site. For example, if I’m an iphone user but I really want to see the full site.

Redirecting a user based on the type of device they are using is not rocket science. In fact, it can be accomplished quite simply using an apache redirect in a .htaccess file.

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.yourdomain.com [R=301]

The issue with this approach is that users coming to your site using an iPad will never have the ability to see the other versions of your site. for many, that may be a satisfactory solution. However, if you want users to have the ability to view a version of your site designed specifically for their type of mobile device by default – but have the option to click a link and either view or optionally set a preference for another version of the site, this article is for you.

Examples and Source Code

I know – you’re in a hurry… you’ve read the intro and you know this is what you’re after… well, here you go… The examples for this site are available for demonstration at http://mlynn.org/uatest/ and the code for this is available for download from the following link:

Version 0.3 – Includes PHP and Perl/CGI Examples
[download id=”2″ format=”1″ autop=”false”]

Version 0.2 – Includes only PHP Examples
[download id=”1″ format=”1″ autop=”false”]

You may additionally download or review the source for this example at github:
http://github.com/mrlynn/MobileBrowserDetectionExample

Before diving in to my solution, let’s cover some of the background and key factors. If you’re a seasoned web publisher and you already understand the basics of the web and how it works, you’ll probably want to skip down a bit.

There are several components involved in any web user interaction.

Web Browsing Device (Device)

This can be any device running some form of browser.  Desktop computers are the most popular devices browsing the web today but mobile devices are swiftly increasing in numbers.  According to statcounter.com, mobile browsers have experienced a 3 percent increase since 2008 and with the advent of hybrid devices such as the ipad and netbook, you can bet this number will continue to grow.

Web Browsing Program (Browser)

This refers to the program being run by the device for the purpose of browsing web content.  Popular browsers include Firefox, Google Chrome, Microsoft Internet Explorer and Opera.  Each browser communicates with web servers in a similar manner.  When the web browser contacts a web server, it sends several pieces of data identifying its program, version and even the device being used for this browsing session.

Web Server (Server)

The web server is responsible for presenting web content to the browsers.  Apache HTTPD and Microsoft Internet Information Server (IIS) are the two most popular web servers.

Web Content

This is the stuff you’re sending to the browser… the stuff you’re reading right now.  Depending on the type of site and your intended audience, you’re likely to have several types of content being delivered to your browsers.

The Conversation

When you type an address into your browser, or click on a link to a web site, the browser initiates a conversation with the target web server.  Much of this conversation is handled by the browser and hidden from you, the viewer.  The following is an example of a conversation initiated by a browser.

GET /uatest/index.php HTTP/1.1
Host: www.mlynn.org
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

In this example, a user is requesting the following url: http://www.mlynn.org/uatest/index.php from an instance of Firefox browser running on a windows device.

Here’s a list of other possible values sent along with a request for web content.

Header Value
Host http://www.mlynn.org
Connection keep-alive
User-Agent Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_3; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.86 Safari/533.4
Referer mlynn.org
Accept application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie __utma=2051572.1472781444.1277919157.1277919157.1277919157.1; __utmc=2051572; __utmb=2051572.1.10.1277919157

Here’s a look at what your actual request headers look like when you’re browser requested this page:

And this is the response sent back to your browser from the instance of apache httpd running on my server:

Apache’s httpd server exposes the values of some of these request and response headers.  If you’re using the Pre-Hypertext Programming language – or PHP as it’s better known, you can access these values using built-in functions.  See PHP: apache_request_headers and PHP: apache_response_headers for more information.

Identifying Mobile Devices

Now that we have a good understanding of the conversation between the browser and the server, let’s focus on identifying mobile devices and redirection.  As I briefly explained earlier, the web browser identifies the browser program and version along with any requests for content from your web server.  The browser identifies these items using the string “User-Agent.”  The trick to identifying mobile devices is all about knowing what is sent in the User-Agent request field by each and every mobile device.  The following is an example sent by a mobile device.

User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

Redirecting Based on User Agent

So now we understand that the browser identifies itself, and if we’re using Apache httpd, we can access the value of that identifier. Let’s take a look a simple redirection example written in PHP.

[php]
if (preg_match(‘/iphone|ipad/’,strtolower($_SERVER[‘HTTP_USER_AGENT’]))) {
header("Location: http://mobile.mlynn.org");
} else {
header("Location: http://www.mlynn.org");
}
[/php]

This example interrogates the user agent variable using a php regular expression function and redirects accordingly. This redirection is facilitated using the PHP header() function.

There are several other mechanisms to accomplish similar redirection. For example, you could implement this redirection using a .htaccess file which would be parsed by Apache. This mechanism is discussed in detail on this blog entry. For now however, let’s stick to our PHP implementation.

If all you’re concerned about is redirecting users to another version of the site, this will probably work for you. You’ll simply need to understand and test for the right user-agent values.

However, let’s assume that we want to get a bit trickier. Let’s say we want to have different content or formatting for four separate versions of our site – one for each variant of browsing device that we want to support. One for normal desktop computer browsers, another for iPhone browsers, another for iPad users and one more for all other mobile browsing devices. The reasons for this are many and varied. You may want simply to vary the advertising code you expose to each user based on the type of device or browser they’re using.

To make this type of implementation work, I’ve created a configuration file to initialize some variables for our site. For each distinct version of the site, I’ll create a variable with the appropriate url. I’ll use these later when we write the code for our redirection script.

config.inc.php

[php]
$SITEURL=’http://mlynn.org/uatest/’;
$LOGFILE=’debug.log’;
$MOBILEURL=’http://mlynn.org/uatest/mobile/’; // Generic Mobile Device URL
$IPHONEURL=’http://mlynn.org/uatest/iphone/’; // iPhone URL
$IPADURL=’http://mlynn.org/uatest/ipad/’; // iPad URL
$NORMALURL=’http://mlynn.org/uatest/normal/’; // Normal – Full site URL
[/php]

Now let’s take a look at what our main index page or landing site will look like. This will be the initial page visited by users before being automatically redirected based on their browser device type.

[php]
$useragent=$_SERVER[‘HTTP_USER_AGENT’];
if (ismobile($useragent)) {
if (isipad($_SERVER[‘HTTP_USER_AGENT’])) {
header("Location: $IPADURL");
} else {
if (isiphone($_SERVER[‘HTTP_USER_AGENT’])) {
header("Location: $IPHONEURL");
} else {
header("Location: $MOBILEURL");
}
}
} else {
header("Location: $NORMALURL");
}
[/php]

This code snippet relies on several important custom functions: ismobile(), isiphone(), and isipad().

The first function examines the user agent value and returns a ‘0’ if the device is not recognized as a mobile device and a ‘1’ if it is mobile.

[php]
function ismobile() {
$is_mobile = ‘0’;

if(preg_match(‘/(googlebot-mobile|android|up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i’, strtolower($_SERVER[‘HTTP_USER_AGENT’]))) {
$is_mobile=1;
}

if((strpos(strtolower($_SERVER[‘HTTP_ACCEPT’]),’application/vnd.wap.xhtml+xml’)>0) or ((isset($_SERVER[‘HTTP_X_WAP_PROFILE’]) or isset($_SERVER[‘HTTP_PROFILE’])))) {
$is_mobile=1;
}

$mobile_ua = strtolower(substr($_SERVER[‘HTTP_USER_AGENT’],0,4)); $mobile_agents = array(‘w3c ‘,’acs-‘,’alav’,’alca’,’amoi’,’andr’,’audi’,’avan’,’benq’,’bird’,’blac’,’blaz’,’brew’,’cell’,’cldc’,’cmd-‘,’dang’,’doco’,’eric’,’hipt’,’inno’,’ipaq’,’java’,’jigs’,’kddi’,’keji’,’leno’,’lg-c’,’lg-d’,’lg-g’,’lge-‘,’maui’,’maxo’,’midp’,’mits’,’mmef’,’mobi’,’mot-‘,’moto’,’mwbp’,’nec-‘,’newt’,’noki’,’oper’,’palm’,’pana’,’pant’,’phil’,’play’,’port’,’prox’,’qwap’,’sage’,’sams’,’sany’,’sch-‘,’sec-‘,’send’,’seri’,’sgh-‘,’shar’,’sie-‘,’siem’,’smal’,’smar’,’sony’,’sph-‘,’symb’,’t-mo’,’teli’,’tim-‘,’tosh’,’tsm-‘,’upg1′,’upsi’,’vk-v’,’voda’,’wap-‘,’wapa’,’wapi’,’wapp’,’wapr’,’webc’,’winw’,’winw’,’xda’,’xda-‘);

if(in_array($mobile_ua,$mobile_agents)) {
$is_mobile=1;
}

if (isset($_SERVER[‘ALL_HTTP’])) {
if (strpos(strtolower($_SERVER[‘ALL_HTTP’]),’OperaMini’)>0) {
$is_mobile=1;
}
}

if (strpos(strtolower($_SERVER[‘HTTP_USER_AGENT’]),’windows’)>0) {
$is_mobile=0;
}

return $is_mobile;
}
[/php]

The following functions are used to detect specific device types.

[php]
function isiphone($useragent) {
$iphone=0;
if (preg_match(‘/iphone/’,strtolower($useragent))) {
$iphone=1;
}
return $iphone;
}

function isipad($useragent) {
$ipad=0;
if (preg_match(‘/ipad/’,strtolower($useragent))) {
$ipad=1;
}
return $ipad;
}
[/php]

Now when a user visits our site, they will be redirected automatically based on the specific device they are using. This works in most cases, but let’s assume we want to give users the option of visiting a site other than the default for their device? Let’s say I’m on an iPhone – but I want to see what the real, full site looks like with my browser. To implement this, we’ll need some way for the user to specify a preference for a specific version of the site.

One way to accomplish this is using cookies. Cookies are small bits of data stored on your computer and referenced when you visit or revisit a web site.

There are several ways to set and get the value of cookies. Javascript can be used but depends heavily on the implementation of javascript on the device. Additionally, you must be certain that the user has not disabled javascript on their device in order for this to work.

Fortunately, cookies can be maintained using server-side code such as php. For our example, we’ll stick with PHP.

To accomplish setting and maintaining cookies via php for our users’ site preference, I created the following php script called setpref.php.

[php]
include_once(‘includes/config.inc.php’);
include_once(‘includes/functions.inc.php’);

$pref = (isset($_POST[‘SITEPREF’]) ? $_POST[‘SITEPREF’] : $_GET[‘SITEPREF’]);
switch ($pref) {
case ‘MOBILE’:
setcookiealive(‘SITEPREF’,’MOBILE’,time()+3600);
header("Location: $MOBILEURL");
break;
case ‘IPHONE’:
setcookiealive(‘SITEPREF’,’IPHONE’,time()+3600);
header("Location: $IPHONEURL");
break;
case ‘IPAD’:
setcookiealive(‘SITEPREF’,’IPAD’,time()+3600);
header("Location: $IPADURL");
break;
case ‘NORMAL’:
setcookiealive(‘SITEPREF’,’NORMAL’,time()+3600);
header("Location: $NORMALURL");
break;
default:
setcookiealive(‘SITEPREF’,’NORMAL’,time()+3600);
header("Location: $NORMALURL");
}
[/php]

This function relies on another function called setcookiealive which simply creates the cookie using php’s setcookie() function and also sets the value of the $_COOKIE variable so that the value is available immediately.

[php]
function setcookiealive($name,$value,$expires) {
$_COOKIE[$name] = $value;
setcookie($name,$value,$expires);
}
[/php]

In order for this to work, we need to give the user’s links to the alternate versions of the sites. Let’s look at one of the example site versions.

[php]
<?php
// Main iPad landing Page
include_once(‘../includes/config.inc.php’);
?>
<html>
<head>
<title>iPad Site</title>
</head>
<body>
<h1>iPad Site</h1>
<div id=’content’>
<h2>This is the iPad site. You got here because you are either using an iPad device or you specified a preference for the iPad site.</h2>
<p>
<?
echo "User Agent: ".$_SERVER[‘HTTP_USER_AGENT’];
?>
<p>
</div>
<div id=’footer’>
Visit Other Site Versions:
<a href="<? echo $NORMALURL;?>"/>Full Site</a> ||
<a href="<? echo $MOBILEURL;?>"/>Generic Mobile Site</a> ||
<a href="<? echo $IPHONEURL;?>"/>iPhone Site</a>
<p>
Set your Preference to other site versions:
<a href="/uatest/setpref.php?SITEPREF=NORMAL"/>Full Site</a> ||
<a href="/uatest/setpref.php?SITEPREF=MOBILE"/>Generic Mobile Site</a> ||
<a href="/uatest/setpref.php?SITEPREF=IPHONE"/>iPhone Site</a>
<p>
<?
if (isset($_COOKIE[‘SITEPREF’])) {
$sitepref=$_COOKIE[‘SITEPREF’];
} else {
$sitepref=’UNSET’;
}
print "YOUR CURRENT SITE PREFERENCE: ".$sitepref;

?>
</div>
</html>
[/php]

I’ve explained the components involved in any standard web user interaction, how they relate specifically to device detection, and I’ve showed one implementation of detection and redirection. If you’d like to implement something similar, feel free to download the code using the following link.
[download id=”1″ format=”1″ autop=”false”]

If you do end up using these scripts, drop me an email or log a comment to let me know how you made out. You can also try out this working example.

Example Site Links:

Related Sites and Interesting Links

Have a site you’d like to add to this list? Send me an email or submit a comment.

Advertisements
Tagged , , , ,

22 thoughts on “Mobile Device Detection and Redirection with PHP

  1. Idel says:

    Hi,
    a simple way to detect devices could be Apache Mobile Filter.

    http://www.apachemobilefilter.org

  2. don booth says:

    I just want to thank you for this piece. I have not been developing for long, building a simple mobile site, this is simple, clean and clear.

    Thanks,

    Don Booth,
    Toronto

  3. KJ says:

    Good work 🙂

    But the code does not seem to pick up the iPad for some reason… Just redirects the iPad to the normal site.

    Cheers

    KJ

  4. KJ says:

    Solved it 🙂

    Just needed to add mobile to the end of the array on line 49 in functions.

    if(preg_match(‘/(android|up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|mobile)/i’, strtolower($_SERVER[‘HTTP_USER_AGENT’]))) {
    $is_mobile=1;
    }

  5. ben nguyen says:

    dear
    Fist of all: I”M not expert 😦 please help

    Curently I’m using htaccess for redirect all mobile to mobile web .. but it hard to switching between two version. your PHP come up nice .. but ferpormance not realy good and it bad for my cached pages

    I looking for other solution which do cookies from htaccess
    http://www.askapache.com/htaccess/htaccess-fresh.html

    if you can use this as reading cookies will be the best ..

    so on the cached webpages only need the link to set cookies by php ..

    thanks for any advices

  6. Jan says:

    I really like your article, very clear.
    However, it does not seem to recognise my HTC_Touch_Pro_T7272 as a mobile device.

  7. Patrick says:

    So is this just a more complicate of saying that it works like described on here? http://zamanosolutions.com/mobile-device-detection/

    I’m not the most tech-savvy in the world and I’m trying to come to grips with this for my business in the most simple form possible.

  8. jaime says:

    i have a subdirectory in my root folder that is being used for a different site. is there a way to exclude this subfolder from the mobile redirect?

  9. dan says:

    How would one integrate this into a wordpress site?

  10. Idel says:

    a little update about apache mobile filter, the AMF now supports several device repository like WURFL, DetectRight and 51Degrees.mobi

  11. Matt Hikel says:

    Hi, I have a motorola 9c. I installed your php code and it worked for my desktop fine (safari). Then I tried it on my mobile 9c and it goes to the normal site. I then tried it on your uatest site, same results, but it does list the phone correctly in the information text. Please just let me know if this is because my phone (mobile windows) is not supported or something else. Thank you very much in advance. Matt Hikel

    • mike says:

      Matt, it’s likely that the browser on the 9c is sending a user agent string that is not recognized as a mobile device. Check the functions.inc.php around like 45 to see where I’m evaluating the user agent string to see if it matches certain known mobile types. We may need to see what the 9c’s browser user agent string looks like and modify this line… hope this helps.

  12. Matt Hikel says:

    Hi Mike, thanx for the repy. I solved the problem by putting ‘macintosh’ where the ‘windows’ was on line 70 and changed the variable to 1 as I pasted below. The way I look at it if the device goes through ALL the aguments for being a mobile device its got to be a NOT a mobile device by defalt, and the default is 0 set at the begining of the script.

    if (strpos(strtolower($_SERVER[‘HTTP_USER_AGENT’]),’mozilla’)>0) {
    $is_mobile=1;

    I however Mike have developed another issue. All was working fine but now on one of my sites I started getting the following browser message

    Safari can’t open “expires: Sat” because Mac OS X doesn’t recognize Internet addresses starting with “expires:”.

    It did this when first installed but I keep fooling with it and it stopped doing it and was working but then it started again and will not go away. Does it everytime. BUT IT IS WORKING FINE on my other server. Got any ideas?
    Thanx in advance. Matt Hikel

    • mike says:

      Hmmm… sounds like there’s an error in the php script somewhere… if you’d like, I can take a look at your source – either post it somewhere where I can see it and send me a link or send it to me via email… merlynn over there at gmail dot com.

  13. 2li says:

    Hi, ok I’m very blond when it comes to this whole script things but I need help. I have clients who want websites but also mobile site. So designing is a piece of cake but redirecting is turning out to be a nightmare for me.
    Most of my clients want their mobile site to support blackberry. What do I do? & how do I do it?

  14. 2li says:

    Hi, so like I need help. I have clients who want websites under the condition that the sites have redirects to mobile sites that are “blackberry” compatible.
    Problems is, I don’t understand this who’ll script business. Both the main & mobile sites have been created.

  15. Benji says:

    I have had this bookmarked for quite sometime knowing that some day I would need this information. If anyone is still monitoring this thread and they have solid knowledge of this code, can you please give me some advice? I need to implement a mobile redirect for a website but offer an option to view the full site from that mobile version. Can I use the cookie/php version above and omit the preference portion. I don’t necessarily want the user to have to set a preference…just simply be able to click “View Full Site.” Would this work? Thanks in advance to anyone willing to divulge this little secret! 😉

    • John says:

      I’ve done this: Put the script on the index.thml. Mobile redirects to /m/index.html and the desktop redirects to home.html. So, if a mobile user chooses “view full site”, they go to home.html which does not have the redirect code, thus canceling a possible endless loop.

  16. John says:

    On that note, I’ve used this script for a few months now. However, the client says the mobile site is not being indexed (by Google, I presume). I just learned that Google has a specific mobile crawler, and they suggest to have the “Googlebot-Mobile” User Agent added (specifically, a User agent that CONTAINS this, not MATCHES, as it may change). I am not a PHP person. Anyone know how to add this conditional statement?

  17. mike says:

    John,

    A most excellent question and one that points out a MAJOR shortcoming in this little example that I’ve cobbled together.

    Here’s a fix… the following are lines 49, 50 and 51 from the original version.

    if(preg_match(‘/(android|up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i’, strtolower($_SERVER[‘HTTP_USER_AGENT’]))) {
    $is_mobile=1;
    }

    To make google mobile index your mobile pages, simple replace line 49 with the following to correctly add a regex expression so that the is_mobile function recognizes google’s googlebot-mobile crawler as a mobile device.

    if(preg_match(‘/(googlebot-mobile|android|up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i’, strtolower($_SERVER[‘HTTP_USER_AGENT’]))) {

    I will update the package and post a new downloadable sometime later this evening.

    Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: