By Hernan Bruno, iPhone and Mobile Technology Expert at Tangelo.

The question is:

For an iPhone website, what is the most efficient way to detect the type of device that is accessing the site? Moreover, how do we provide the user the best experience by providing the appropriate content in a format that is optimized for the device?

The challenge was to redirect all users that do not access the website with iPhone or iPod to either a desktop browser or to a very simple page that would fit most mobile devices.

Our research indicated several ways to detect devices and do the redirection. We list them below and give an explanation of the pros and cons of each of them.

1. CSS3
2. Javascript
3. Server languaje (PHP, ASP, etc)
4. Apache .htaccess

We tested the four methods and reached the following conclusions.

• The first two methods are an easy way to get going fast, but they dependent on the capabilities of the device. If the device does not support CSS3 or Javascript then the redirection is not carried out. For this reason, this method is recommended in instances where you have a very good idea of the technical profile of your users.

• When the redirection is done through Javascript, PHP or .htaccess we check the header that the browser sends when it  requests a page. At the same there is a record called HTTP_USER_AGENT that contains all device and browser information. This is valid for PC, iPhone and another devices. The HTTP_USER_AGENT is only a string containing such information.

Here is a example string sent by Google’s Nexus One running Android 2.1.

Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

• With PHP, although it is quite simple to do, it did not seem appropriate to use because PHP is not required for our particular case. We are only using pure HTML, JS and CSS. It does not seem like a good idea to add another language to the site just to address the issue.

We chose the .htaccess option. We configured .htaccess to be responsible to control connected devices and redirect them properly.

Let’s get down to work.  Let’s add some lines to .htaccess so that if the device accessing our website is not a iPhone or iPod then the site forwards to the http://example.net

The lines that we have to add to do that are:

1 – RewriteEngine on
2 – RewriteCond %{HTTP_USER_AGENT} ^((?!iPhone).)*$
3 – RewriteCond %{HTTP_USER_AGENT} ^((?!iPod).)*$
4 – RewriteRule .* http://example.net/ [R]

The explanation of these lines is as follows:

• The first enables redirection
• With the second and third define our conditions by checking the HTTP_USER_AGENT string and using regular expression to establish the condition
• The latter is for the redirection itself. If the conditions apply, we must tell the browser where to redirect.
• All the information needed to apply these rules can be found at the apache website

If you want to check for other devices, all we need to do is add more rules to RewriteCond and RewriteRule in our .htaccess file with devices that need. A list of headers by device can be found here

User experience benefits

• Zero lag time between website versions
• Content format optimized for device

If you are looking for iPhone development services please contact us to +1 (800) 985-5280 or simply fill out this form.