iPhone Detection Scripts

Posted By: Mark Aplet 4 Comments July 23, 2008

With iPhones being all the rage these days, I am wondering if mobile versions of your pages might be useful. Viewing a site on an iPhone looks exactly as it does on your desktop. This is all well and good, but sometimes pages can be bloated with images, javascript libraries, and other markup that is not as important to your visitors. I am also a bit upset that the iPhone ignores the css media type of handheld. I wish there were an option to force Safari to render handheld styles as default, but I could not find any option for it. So I set out on a quest to find some alternatives for my iPhone experience.

Coldfusion – I was sure there was a way to get something from the cgi.http_user_agent but not sure if it would just read the agent as webkit. I didn't want to kill Safari desktop users, that would be bad. The Awesome Coldfusion Jedi Ray Camden already had a solution so here it is: (Sorry for the comments around the actual code. Seams that MangoBlog wants to parse the code and run it causing an error. So remove the comments from the cfif statement to make it work. I hope to get a fix for this soon)

<!--- detect iphone --->
<!---
<cfif findNoCase("iphone", cgi.http_user_agent)>
   <cflocation url="iphone.html" addToken="false">
</cfif>
--->

Javascript, PHP, and MVC – I ran across a site called iPhone Toolbox that has a ton-o-info on developing for the iphone. (I will be spending some time here for sure.) There is a set of scripts linked up there dealing with how to detect an iPhone users that pretty much covers the rest of the developers. Here is that code

Client-side (javascript):
    if (navigator.userAgent.indexOf('iPhone') != -1) {
       /* iPhone user */
      }
   
Server-side (example is PHP):
    if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
       /* iPhone user */
      }
   
For sites that use an MVC coding pattern where the programming logic code is separate from the template, the following example is useful:
    if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
       $template = 'home/iphone.html';
      }
      else {
       $template = 'home/index.html';
      }

If you have any other cool resources, I would love to hear about them. I did run into another site with some code to detect iPhone's and iPod's, but I couldn't make it work, so I have no idea if you have to detect them separately or not. It does speak to the reason why Apple should have an option in the settings pane to make an iPhone or iPod use a handheld stylesheet. But for now at least there is a work around.

Tags: Code · ColdFusion · CSS · General

4 comments so far ↓

  • 1 david // Jul 23, 2008 at 9:59 PM
    there is good example code at www.handsetdetection.com if you are looking to go broader than just iphones..
  • 2 Adam Tuttle // Jul 24, 2008 at 7:45 PM
    Mark, I'd like to talk with you about posting code in Mango. Can you email me?
  • 3 Mark Aplet // Jul 25, 2008 at 8:29 AM
    Thanks for the link David. It looks promising.
  • 4 Casper B. Hansen // Jun 16, 2009 at 3:12 AM
    Thanks!

Leave a Comment

Leave this field empty:

Theme Design By Mark Aplet

Super Powered by Mango Blog

comparable