Detectar iPhone, iPod y iPad con Javascript o PHP

iPhone & iPod Detection Using JavaScript

I was browsing the ESPN.com source code recently and stumbled upon their method of detecting iPhone / iPod touch users and redirecting them to their iPhone-compatible website.

JavaScript

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
}

The code itself is short and sweet. I, however, would prefer using the server-side method of user agent checking.

PHP

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
  header('Location: http://yoursite.com/iphone');
  exit();
}

iPad Detection Using Javascript or PHP

The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I’m underwhelmed with the device but that doesn’t mean I shouldn’t try to account for such devices on the websites I create. In Apple’s developer tip sheet they provide the iPad’s user agent string:

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/7B334b Safari/531.21.10

Given that string we can create a few code snippets to determine if the user is being a smug, iPad-using bastard.

JavaScript

// For use within normal web clients
var isiPad = navigator.userAgent.match(/iPad/i) != null;

// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);

A quick String.match regular expression test can check for the presence of “iPad” in the user agent string.

PHP

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');

This time we look for the position of “iPad” in the user agent string.

.htaccess

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

Using some logic from Drew Douglass’ excellent mobile redirection post, we can redirect users to a mobile version of your website if you so desire.

So what would you the above tests for? You may want to redirect iPad users to a different version of your website. You may want to implement different styles to your standard website if your user is surfing on an iPad.

——————————

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

By | April 20, 2010 | Web Tech

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:

  1. 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:

  1. 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:

  1. 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:

  1. // Apple detection object
  2. var Apple = {};
  3. Apple.UA = navigator.userAgent;
  4. Apple.Device = false;
  5. Apple.Types = [“iPhone”, “iPod”, “iPad”];
  6. for (var d = 0; d < Apple.Types.length; d++) {
  7.     var t = Apple.Types[d];
  8.     Apple[t] = !!Apple.UA.match(new RegExp(t, “i”));
  9.     Apple.Device = Apple.Device || Apple[t];
  10. }
  11. // is this an Apple device?
  12. alert(
  13.     “Apple device? ” + Apple.Device +
  14.     “\niPhone? ” + Apple.iPhone +
  15.     “\niPod? ” + Apple.iPod +
  16.     “\niPad? ” + Apple.iPad
  17. );

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

  1. // Apple detection array
  2. $Apple = array();
  3. $Apple[‘UA’] = $_SERVER[‘HTTP_USER_AGENT’];
  4. $Apple[‘Device’] = false;
  5. $Apple[‘Types’] = array(‘iPhone’, ‘iPod’, ‘iPad’);
  6. foreach ($Apple[‘Types’] as $d => $t) {
  7.     $Apple[$t] = (strpos($Apple[‘UA’], $t) !== false);
  8.     $Apple[‘Device’] |= $Apple[$t];
  9. }
  10. // is this an Apple device?
  11. echo
  12.     “<p>Apple device? “, ($Apple[‘Device’] ? ‘true’ : ‘false’),
  13.     “</p>\n<p>iPhone? “, ($Apple[‘iPhone’] ? ‘true’ : ‘false’),
  14.     “</p>\n<p>iPod? “, ($Apple[‘iPod’] ? ‘true’ : ‘false’),
  15.     “</p>\n<p>iPad? “, ($Apple[‘iPad’] ? ‘true’ : ‘false’),
  16.     ‘</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.

  1. RewriteCond %{HTTP_USER_AGENT} ^.*(iP.*$
  2. 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?

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s