🤯 50% Off! 700+ courses, assessments, and books
Browse Titles
Programming

How to Identify an Apple iPhone, iPod or iPad Visitor to Your Website

    Craig Buckler
    Share

    You can’t escape them. Visit any place where tech-geeks congregate and you’ll find an abundance of Apple appliances. It doesn’t matter whether it’s a Microsoft conference or a Google get-together — the iPhone is omnipresent. (It’s been reported that 10% of Microsoft employees own the devices, much to the disgust of upper management!) The iPad was launched recently and I expect it will become almost as popular.

    Apple Agents

    Devices which request content from your website (usually) pass a user agent string. This contains information such as its name, OS, browser version, and rendering engine. Apple’s gadgets pass the following user agents, although you may find subtle variations in the version numbers:

    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

    iPod:

    
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A101a Safari/419.3

    iPad:

    
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) version/4.0.4 Mobile/7B367 Safari/531.21.10

    Ascertaining Apple

    identify iPhoneThe user agent string can be analyzed on the server or client to determine which device is accessing your site. That said, remember browser sniffing stinks: it’s better to create a single website which works on a variety of browsers than maintain multiple differing versions. However, you could use this code to collate statistics or create alternative view of your web application which matches the iPhone interface.

    Without further ado, here’s some JavaScript detection code:

    
// Apple detection object
var Apple = {};
Apple.UA = navigator.userAgent;
Apple.Device = false;
Apple.Types = ["iPhone", "iPod", "iPad"];
for (var d = 0; d < Apple.Types.length; d++) {
	var t = Apple.Types[d];
	Apple[t] = !!Apple.UA.match(new RegExp(t, "i"));
	Apple.Device = Apple.Device || Apple[t];
}

// is this an Apple device?
alert(
	"Apple device? " + Apple.Device +
	"niPhone? " + Apple.iPhone +
	"niPod? " + Apple.iPod +
	"niPad? " + Apple.iPad
);

    Similar code can be developed in PHP for server-side detection:

    
// Apple detection array
$Apple = array();
$Apple['UA'] = $_SERVER['HTTP_USER_AGENT'];
$Apple['Device'] = false;
$Apple['Types'] = array('iPhone', 'iPod', 'iPad');
foreach ($Apple['Types'] as $d => $t) {
	$Apple[$t] = (strpos($Apple['UA'], $t) !== false);
	$Apple['Device'] |= $Apple[$t];
}

// is this an Apple device?
echo
	"<p>Apple device? ", ($Apple['Device'] ? 'true' : 'false'),
	"</p>n<p>iPhone? ", ($Apple['iPhone'] ? 'true' : 'false'),
	"</p>n<p>iPod? ", ($Apple['iPod'] ? 'true' : 'false'),
	"</p>n<p>iPad? ", ($Apple['iPad'] ? 'true' : 'false'),
	'</p>';

    Alternatively, you could use Apache’s .htaccess file to redirect to an Apple-specific version of your website on another URL or sub-domain, e.g.

    
RewriteCond %{HTTP_USER_AGENT} ^.*(iP.*$
RewriteRule ^(.*)$ http://apple.site.com [R=301]

    Useful stuff, but an important question remains: should we be developing separate versions of our web sites for these popular devices?