
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? 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: <!--#if expr="(${HTTP_USER_AGENT} = /iPhone/)"-->
<style type="text/css"> <!-- here's where you'd include special styles for the iPhone --> </style> <!--#else --> <style type="text/css"> <!-- regular web browser style and CSS information goes here --> </style> <!--#endif --> 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 Stumble Upon
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. var agent=navigator.userAgent.toLowerCase(); I think you might want to do indexOf('iphone') since agent is all lower case. Posted by: Dude at October 12, 2007 5:59 PMWindows 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 PMDave, 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 PMRuby on rails has auto detection for various types of request:
Hi also i would like to know how to detect visitior coming from blackjack. Hey Guys, The javascript in his post is a bit broken, here is the fixed code: var agent=navigator.userAgent.toLowerCase(); 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.
Michael - I think you need to use window.location for your redirect: var agent=navigator.userAgent.toLowerCase(); <script language=javascript> Miki, that worked. Thanks. Posted by: Steven Eckelberry at April 15, 2008 9:19 PMI have created a website using iWeb. I would like to insert some html code (or some type of code) that recognizes when a viewer is visiting on an iPhone versus a regular computer. I've read the above and tried inserting the java script in the html snippet but it does not work. Do you know if there is a way to do this? Thanks, you can also use a more advanced web service such as handsetdetection.com which returns real time information on which devices are accessing your site - and then allowing you to adjust the view. Data it returns includes screensize, browser, phone make and model and also location based information. Posted by: david at July 16, 2008 8:04 PMDear Dave I've made a Drupal web site, and I wish use Jquery to reveal iPhone. Is there a way to reveal iPhone by jquery? I've reveal the safari browser woth this code: if ($.browser.safari) { BUt I can't understand if the safari browser is for iPhone or Mac... Someone can help me please?
feel free to email me. thankyou in advance. Posted by: nomadarts at November 2, 2008 7:26 PMI have a lot to say, but ...
I do have a comment, now that you mention it!
|
![]()
Search
Find just the answers you seek from among our 2000+ free tech support articles by using our Lijit search engine.
Help!
Subscribe to
Ask Dave Taylor!
Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.
Articles and Reviews
Auctions and Online Shopping Blogs and RSS Feeds Building Web site traffic Business and Management Cell Phones and Mobile Phones CGI Scripts and Web Site Programming Computer and Internet Basics d) None of the Above HTML and CSS Industry News and Trade Shows Mac OS X Help MySpace, Facebook, Twitter and Social Network Help Pay Per Click (PPC) Search Engine Optimization Shell Script Programming Sony PSP, MP3 Players, Etc. The Writing Business Unix and Linux Help Video Game Tips and Help Windows Help
Recent Entries
Join the List!
Book Links
|