iPhone, iPad, iPod Detection in Javascript

Saturday, February 26, 2011 EST (Updated on: Thursday, July 21, 2011 EDT)

by: Eric Potvin

Tags: javascript iphone

If you develop website for Apple iPhone^tm or Apple iPod Touch^tm or an Apple iPad^tm, you might want the user to be redirected to another page.

The version of Safari Web Browser used by the Apple iPod Touch^tm is the same as the version used by the Apple iPhone^tm or an Apple iPad^tm, 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:

<script type="text/javascript">
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";
}
</script">

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;" />

• Download PDF*
• View/post comments
• Link to this article
• Print this article
• Bookmark this article