iPhone, iPad, iPod Detection in Javascript

Posted on Friday February 25, 2011 / by Eric Potvin

If you develop website for Apple iPhonetm or Apple iPod Touchtm or an Apple iPadtm, you might want the user to be redirected to another page.

The version of Safari Web Browser used by the Apple iPod Touchtm is the same as the version used by the Apple iPhonetm or an Apple iPadtm, but carries a different user agent string.

iPod Touch user agent:

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

iPhone user agent:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420 (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3

iPad user agent:

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

Here's the JavaScript code you need to use in your landing page:

if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
    // some code
    window.location = "/iphone.html";
}

if(navigator.userAgent.match(/iPad/i)) {
    // some code
    window.location = "/ipad.html";
}

In the file iphone.html or ipad.html (filename from the JavaScript above), you will need to put the following:

<meta name="viewport" content="width=device-width, user-scalable=no" />

or

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />