How To Detect Mobile Devices and Browser Type Efficiently? [MOBILE]

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:

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.

Related Posts

HOW TO Start Developing iPhone Web Apps?

10 Comments

  1. Sever side detection is definitely the way forward. But there are device detection repositories that can do this job for you. Manually maintaining your own database can be a headache when you are reliant upon a series of regexs to detect thousands of different mobile devices and the accuracy will be very hit and miss even with extensive testing. If you are serious about detecting your users device hardware, browsers or operating systems I would recommend the detection provided by 51Degrees.mobi, with over 31,000 unique device combinations and a 99.9% accuracy rate they do all the hard work for you. Open source, regular updates and they support all major programming environments and over 20 content management systems, including all the major players.

  2. 3. You can’t just imagine how I really like your blog. Each phrases support each other sentences. In fact, I’ve few lines by which it can make me stunned all the time.

Leave a Reply

Your email address will not be published. Required fields are marked *