This is the first in a series of tutorials that explain how to detect mobile devices, and so direct a user to the appropriate mobile-optimised webpage.
This tutorial assumes a intermediate knowledge of PHP and HTML.
The User Agent string
To automatically direct a mobile user to your mobile-optimised website, you must first know what platform they are using to access your website.
This can be done by checking the User Agent string in PHP:
$ua = $_SERVER['HTTP_USER_AGENT'];
This User Agent string will contain different text depending on the platform that views your page, identifying the platform, the browser, and other relevant information.
For example, for the Nokia N95, the User Agent string will be:
Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95/11.0.026; Profile MIDP-2.0 Configuration/CLDC-1.1) AppleWebKit/413 (KHTML, like Gecko) Safari/413
(version numbering may change)
For the first 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
And for Mozilla Firefox (version 3.0.10 running on Windows XP):
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
As you can see, there are similarities and differences between each string. It is interesting to note that the Nokia N95 uses Safari, however of course it is not the desktop Safari version. Also, the iTouch (the non-phone version of the iPhone) identifies itself almost identically to the iPhone, but as an iPod instead.
Using the User Agent String
Even though there is a lot of information in the User Agent string. there are relevant segments that you can use to pick out which platform is using it. Using these segments we can identify the platform, and so direct the user to the appropriate webpage(s).
For example, to detect the iPhone, we can use the following code:
// get the User Agent string
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
// detect if iPhone/iTouch
if ((strpos($ua, 'iphone') !== false) || (strpos($ua, 'ipod') !== false))
{
// redirect to mobile/iphone
header('Location: ' . 'http://www.example.com/mobile/iphone/index.php');
}
What is happening here?
Well first we are retrieving the User Agent string, and converting it to lower case (to make our comparisons easier).
Then we are examining the string itself, and seeing if it contains the text ‘iphone‘ or ‘ipod‘ (for the iTouch).
If it does contain that data, then we call the header() function, which redirects the server to another page, in this case our iPhone-optimised web page.
It is important to note that this would be called near the top of your PHP page before any HTML has been sent, as that will enable the redirect to occur.
It’s as simple as that?
This example will work if you solely wanted to detect an iPhone/iTouch and display a separate page for that. However, if you want to detect a range of mobile platforms, then the problem becomes a lot more difficult, and we will examine why this is and how to handle it, in the next tutorial.