Skip to main content

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

By Craig Buckler
Programming
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?

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad