Industry guru Dave Taylor answers free tech support questions about a wide variety of business and technical topics, including blogging, Google AdSense, MySpace, Sony PSP, Apple iPod, Mp3 players, management, Linux, SEO, Mac OS X, Facebook, Twitter, LinkedIn and Microsoft Windows.

Still befuddled? Get immediate live tech support with SupportSpace!

How do I detect an iPhone user coming to my site?

Amazon.com's jumped on the wagon, and Meebo has too: they automatically give you a different version of their site if you're browsing from an Apple iPhone. I want to do that too. How the heck do I detect that a visitor has an iPhone?

Dave's Answer:

The key to detecting a browser type is to remember that there's an environment full of information transmitted with each query sent from the web browser to the server. It includes the obvious things like the requested data file (which can be an HTML document, GIF or JPEG image, AVI movie, FLV animation or related) and the IP address of the browser's computer, but it also includes a critical variable called HTTP_USER_AGENT.

Visit with a regular browser from a regular computer and you'll see something like this:

HTTP_USER_AGENT=Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

Here you can see that I'm testing from Firefox (which identifies itself as Mozilla for historical reasons) running on Windows XP (though it's identifying it as Windows NT for some cockamainie reason) and that I'm also running .NET.

Grab that same environment value from a slick Apple iPhone query, though, and the values are quite a bit different:

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

Pretty interesting reading if you're a geek: You can see where it's also identifying itself as Mozilla, but this time as Mozilla/5.0 rather than Mozilla/4.0. The string "iPhone" appears, which is what we'll key on, but notice also that it says that it's on a system with a "CPU like Mac OS X", just as we iPhone users have been suspecting for a while.

You can see the basic test we'll need to do here to ascertain if the visitor is using an iPhone or not: if their HTTP_USER_AGENT environment value contains the string "iPhone", we've got a match. Otherwise it's something else on some other device or computer.

You can do this test and act on it in a zillion different places, ranging from the actual Web server ruleset to JavaScript code to PHP conditional code to even having a separate "gateway" script page that everyone hits and redirects them to the iPhone or non-iPhone version of your Web page and site.

A JavaScript snippet might look like this:

var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf('iPhone')!=-1);
if (is_iphone) { conditional code goes here }

Rather do it as a shell script? Me too. Here's how I'd do that as a rudimentary Linux shell script:

#!/bin/sh

if [ ! -z "$(echo $HTTP_USER_AGENT | grep iPhone)" ] ; then
echo "Location: iphone/index.html"
else
echo "Location: index2.html"
fi
exit 0

You can also have the conditional directly in CSS itself, if you're really into cryptic notations:

<style type="text/css">

</style>

<style type="text/css">

</style>

The basic idea in either case is that once you have detected that they're running an iPhone, you can modify what you deliver to them, either changing what's on the page, perhaps giving them a completely different version of the page, or even taking them to a different site entirely.

Hope that helps you out! Don't forget while you're here that I have quite a lot of iPhone help here too.

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Simpy.

Categorized: CGI Scripts and Web Site Programming (Article 7532)
Tagged: apple iphone, conditional css, javascript, linux
Previous: Does anyone make a bluetooth pen device?
Next: How do I create a new group in Facebook?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf('iPhone')!=-1);
if (is_iphone) { conditional code goes here }

I think you might want to do indexOf('iphone') since agent is all lower case.

Posted by: Dude at October 12, 2007 5:59 PM

Windows XP is the same as Windows NT 5.1!

It's the same thing as you said about Firefox being called Mozilla 5.0

http://en.wikipedia.org/wiki/Windows_NT#Releases

Posted by: James at October 24, 2007 2:21 PM

Dave,

Thank you for this info.

I have been trying to use the Javascript you listed here to redirect iphone users to a different version of a site, with no luck.

How would you do it if you had to use javascript?

Posted by: Chris Wilson at November 14, 2007 2:08 PM

Ruby on rails has auto detection for various types of request:

respond_to do |format|
format.html #index.html.erb
format.xml { render :xml => @articles.to_xml }
format.rss { render :layout => false } #index.rss.builder
format.iphone do #action.iphone.erb
render :layout => false
end
end

Posted by: Frederico Araujo at December 25, 2007 1:17 PM

Hi
I am developing site for small browsers.Currrently i am facing issue for Iphone and Blackjack.On this i am gettting large browsers screens .I am detecting iphone browser through user-agent but since i dont have iphone i thought of checking it on simulator which gives me information of IE.

also i would like to know how to detect visitior coming from blackjack.

Posted by: first time user at January 31, 2008 11:47 PM

Hey Guys,

The javascript in his post is a bit broken, here is the fixed code:

var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf('iphone')!=-1);
if (is_iphone) { /* execution here */ }

Posted by: Amadeus at February 13, 2008 11:38 PM

Hello,

I am trying to implement your javascript into my site for a page redirection when the user visits the site with a Iphone but i am experiencing problems i was hoping that you could help me by telling me what i did wrong for the javascript coding.

var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf('iphone')!=-1);
if (is_iphone) { scr="http://www.qualitycontactsolutions.com/iphone/" }

Posted by: Michael Garfinkel at February 19, 2008 4:50 PM

Michael -

I think you need to use window.location for your redirect:

var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf('iphone')!=-1);
if (is_iphone) { window.location ="http://www.qualitycontactsolutions.com/iphone/" }

Posted by: Phil at February 21, 2008 10:38 AM

Posted by: Miki at February 25, 2008 5:43 PM

Miki, that worked. Thanks.

Posted by: Steven Eckelberry at April 15, 2008 9:19 PM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!