iPhone & iPod Detection Using Javascript

Written by David Walsh on Thursday, February 19, 2009

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.

The 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.

The PHP

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

Which would you prefer?

Download PDF

Follow via RSS Epic Discussion

February 19 / #

Larry says:

Thank you so much for this post. I have a couple sites I would love to test this on to see if there is much if any difference between the two.

February 19 / #

Jeremy Parrish says:

Before everyone goes crazy implementing things like this, they should realize that some users do not want to be forced to use the mobile version. For example, I found it to be impossible to change my fantasy football lineup on ESPN.com from the iPod Touch because it kept redirecting me to their stripped-down mobile version of the site. There at least needs to be a way to override the redirection if the user so chooses.

February 19 / #

Eric Wendelin says:

I’d prefer a mobile stylesheet, but these are definitely keeper snippets. Thanks, David!

@Jeremy:
It would be a horrible practice not to have a big link to the non-mobile version of the site, which had better have a way to detect that such a link was clicked. I’m sure people that read this know that, right?

February 19 / #

david says:

@Jeremy Parrish: Good point. I’m currently working on a mobile website and that’s one consideration I’ve taken.

February 19 / #

Mark Sanborn says:

iPhone and the iPod touch are perfectly capable of rendering a website in full version and navigation is not a problem. I would prefer to have an option/link to go to a mobile site.

February 19 / #

Mark Sanborn says:

Oh, btw good script to have at your disposal.

February 19 / #

Drew says:

Just in case anyone is interested, we had an excellent article on Dev-Tips by Brian Cray that explained how to redirect iPhone and blackberry users using .htaccess. You can find it here: http://dev-tips.com/featured/redirect-iphone-blackberry-palm-requests-with-htaccess

Excellent article and scripting as always David.

February 19 / #

david says:

Awesome tip Drew! Your tutorial has all of the rewrite rules commented out though — you may want to change that. Thanks for commenting!

February 20 / #

Drew says:

Whoops, thanks for the heads up David, must have missed that when I was publishing the article. Much thanks :)

March 04 / #

Gareth says:

Good script, been looking for something like this.
I have another iPhone question:

Is there a way of getting access to the location data (lat,lng) of the iPhone using PHP, or some other lang?
e.g: User browses to website using safari, clicks on a button that send their lat,lng to the website.
It is implemented on many of the apps that can be installed on the iPhone (twitterfon for example), but I’m trying to get it working on a website.
Cheers
Gareth

May 02 / #

tim says:

I looked all over for code that worked for me. This was perfect
(I have a flash-based site that can’t be viewed by most phones)
However, on the mobile-centric site, I have a link to the flash site without the sniffer — which I find as an acceptable work-around to the person that was having trouble with ESPN re-directing his fantasy football site.

Thanks so much!

May 24 / #

Dan says:

Thank you so much for this post. I was looking for a simple javascript method of sniffing for an iphone and re-directing to a separate page of content. This worked the first time! Thank you so much for posting this.

Grateful.

August 26 / #

jared says:

this is great for all-flash sites…iphones can NOT render those at all. That’s exactly what i need it for, thanks!

September 02 / #

james says:

Hi David, the javascript works great. Just wondering if you got anywhere in writing that ‘view the full site here’ code? I’ve had a look around, but i think its going to need cookies and things I will just never get to grips with. Any ideas would be great!

thanks,
James

October 22 / #

Joao Joaquim says:

thanks, I’ve been looking exactly for this!

November 04 / #

Jaime says:

@Mark Sanborn: Not true if the website is all in Flash! This script is perfect to redirect to a HTML version of the same website. Thanks for the script. Hope some day soon Iphones can run Flash.

November 18 / #

hwkd65 says:

got the javascript to work then all of the sudden it stopped working

this .php version and all of the others have not worked

.htaccess options have also not worked

i am going to tell client to go .mobi

need to show home page w/o flash gallery

November 25 / #

danny says:

wouldnt using one of the web services like handsetdetection.com be a more effective way?

November 25 / #

David Walsh says:

@danny: This script is obviously very primitive. I’d prefer not to rely on another service if I didn’t have to.

December 08 / #

Eamonn says:

Yes, you can use JavaScript to get the location data like so:

navigator.geolocation.getCurrentPosition( locationIs, locationNotSUpported );

function locationIs(loc)
{
// use the values
// loc.coords.latitude;
// loc.coords.longitude;
}
function noLocation()
{
//fallback code if no location handling
}

December 08 / #

Eamonn says:

(That last reply of mine was aimed @Gareth in response to his question as to whether you could get the geo information from an iPhone in a web app.)