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

Tweet

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Rakesh Pai

    I strongly recommend *against* using this. I recently built a mobile web app that would have worked fine on Android touch phones, but I was alienating those users due to a similar UA sniff. It’s better to search for “mobile” and “webkit”, and set the page width to “device-width”. And even that is not future proof.

  • Pieter

    If I use that javaScript code in my html… where do I put a string to redirect the user to a mobfriendly site?

  • v3ktor.se

    Is there a way to find out if a visitor is on the android platform as well?
    I can think of cases where you want to make one CSS layout for touch screen smart phones (iPhone / Android) and one CSS layout for older mobile devices.

  • http://www.optimalworks.net/ Craig Buckler

    @Rakesh Pai
    Agreed. But, as mentioned, this could help if you’re collating statistics or want to provide an iPhone-like interface for your web app.

    @Pieter
    JavaScript can redirect using window.location.href, e.g.

    if (Apple.iPhone) window.location.href="http://iphone.mysite.com/";

    However, I’d recommend you redirect server-side. JavaScript requires the page to start downloading and it can be disabled.

  • filosganga

    Hi,
    A better method can be using WURFL API. It permits to recognize most of the mobile terminal on the market since several years. It supplies to you with the recognized device features and capabilities.

    Look at new api tutorial on the WURFL opensource site.

    Redirecting with javascript is a bad idea form mobile. Because most of the mobile devices on the market does not support javascript properly or at all.

    Filippo De Luca

  • Richard.Boreiko

    You’d think after all these years that the browser & device makers would have agreed on a simple standard. The way it’s being done has cost countless hours with developers continually having to look for what works.

  • http://www.webmaster-resources101.com Mr. Tech

    Great article thanks for that! I definitely think that’s going to come in handy in the near future :)

  • gclarkson

    A very helpful article, one I have been needing for a while!

    I should like to serve a different version of my .CSS in order to manage the screen real estate for mobile devices, in particular the fact that scroll bars created by overflow:auto; don’t work on the iPhone.

    Can you tell me how I can do that with PHP, or through .htaccess?

    Thanking you in advance.

    Glenn.

  • Brad

    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))||
    (navigator.userAgent.match(/iPad/i))) {
    if (document.cookie.indexOf(“iphone_redirect=false”) == -1) window.location = “http://www.m.oceanicviewstudios.com/”;
    }

    Here’s a code I made to detect and iPhone, iPod or iPad. Works well according to my customers.