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?

33 Comments

  1. It is perfect time to make some plans for the longer term and it is time to be happy. I’ve read this submit and if I may just I desire to recommend you some interesting things or tips. Perhaps you can write subsequent articles regarding this article. I want to read more things approximately it!

  2. I’m very happy to read this. This is the kind of manual that needs to be given and not the random misinformation that’s at the other blogs. Appreciate your sharing this greatest doc.

  3. I would like to thank you for the efforts you’ve put in writing this blog. I am hoping the same high-grade blog post from you in the upcoming also. Actually your creative writing skills has inspired me to get my own blog now. Actually the blogging is spreading its wings fast. Your write up is a great example of it.

  4. I and my friends have already been digesting the best tips and tricks from your web site while unexpectedly got an awful suspicion I never expressed respect to the web site owner for those secrets. The young boys appeared to be for that reason thrilled to read through all of them and now have in truth been taking pleasure in these things. Appreciate your truly being well accommodating and then for picking this kind of beneficial resources most people are really eager to learn about. My very own sincere apologies for not expressing appreciation to sooner.

  5. Hi there, You’ve done an incredible job. I’ll definitely digg it and personally recommend to my friends. I’m sure they’ll be benefited from this site.

  6. Hi there! This is my 1st comment here so I just wanted to give a quick shout out and tell you I genuinely enjoy reading your articles. Can you suggest any other blogs/websites/forums that cover the same subjects? Thanks for your time!

  7. hi!,I like your writing very so much! proportion we keep in touch extra approximately your post on AOL? I need an expert in this space to unravel my problem. Maybe that’s you! Having a look ahead to see you.

  8. Hiya, I’m really glad I’ve found this information. Today bloggers publish only about gossips and internet and this is actually frustrating. A good blog with interesting content, that’s what I need. Thanks for keeping this site, I’ll be visiting it. Do you do newsletters? Can’t find it.

  9. I simply wanted to thank you very much once again. I do not know what I could possibly have created in the absence of the actual creative ideas revealed by you on such a area of interest. It was before a real difficult issue for me, nevertheless considering your expert way you managed that forced me to cry over fulfillment. I will be happy for the help and in addition hope you comprehend what a powerful job you’re doing training other individuals through the use of your web blog. I know that you have never come across any of us.

  10. HiHelloHi thereHello thereHowdyGreetings, I thinkI believeI do believeI do thinkThere’s no doubt that your siteyour websiteyour web siteyour blog might bemay becould becould possibly be having browserinternet browserweb browser compatibility issuesproblems. When IWhenever I look at yourtake a look at your websiteweb sitesiteblog in Safari, it looks fine but whenhowever whenhowever, ifhowever, when opening in Internet ExplorerIEI.E., it hasit’s got some overlapping issues. I justI simplyI merely wanted to give you aprovide you with a quick heads up! Other than thatApart from thatBesides thatAside from that, fantasticwonderfulgreatexcellent blogwebsitesite!

  11. It’s actually near close to impossible to find well-qualified men or women on this niche, however you appear like you realize whatever you’re indicating! Appreciation

  12. Only wanna comment on few general things, The website pattern is perfect, the subject material is really fantastic. “Believe those who are seeking the truth. Doubt those who find it.” by Andre Gide.

  13. Faytech North America is a touch screen Manufacturer of both monitors and pcs. They specialize in the design, development, manufacturing and marketing of Capacitive touch screen, Resistive touch screen, Industrial touch screen, IP65 touch screen, touchscreen monitors and integrated touchscreen PCs. Contact them at http://www.faytech.us, 121 Varick Street,3rd Floor,New York, NY 10013,+1 646 205 3214

  14. MetroClick specializes in building completely interactive products like Photo Booth for rental or sale, Touch Screen Kiosks and Digital Signage, and experiences. With our own hardware production facility and in-house software development teams, we are able to achieve the highest level of customization and versatility for Photo Booths, Touch Screen Kiosks and Digital Signage. MetroClick, 121 Varick St, #301, New York, NY 10013, +1 646-843-0888

  15. I simply want to mention I’m beginner to blogging and definitely loved you’re web-site. More than likely I’m planning to bookmark your blog . You actually have awesome articles and reviews. Cheers for sharing your web-site.

  16. Ԝhat i don’t understood iѕ in reality how yοu’re now not reaⅼlу a lot more smartly-preferred than you may Ƅe now.
    You are very intelligent. You rеcognizе thus considerably in terms of this matter, produced me
    personallү imagine it from a lot of varied angles.
    Ⅰts like men and wоmen aгen’t fascinated until it’s one
    thing to accomplish with Girl gagа! Your own stսffs outstanding.
    Always maіntain it ᥙp!

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

  18. 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 *