Home > Software, Web > Mobile device recognition

Mobile device recognition


Nowadays when you create a web site you should also think to the ones accessing it from a mobile device. But how you can know this?
I’m going to show you next a few methods on how you can do this and present the advantages and disadvantage of each one.

WURFL

My favorite method of detecting a mobile device is WURFL. WURFL is an open source database of mobile devices capabilities. Every mobile device is identified by its User-Agent string (you can find it in the HTTP headers) and has associated a list of capabilities grouped into categories. How exactly you can use it in .NET you can see here.
You will also have to consult the X-Device-User-Agent HTTP header because some mobile providers are rewriting the User Agent. And just to be sure that you also recognize Opera Mini (and actually the real device) you can inspect the information in the X-OperaMini-Phone-UA header.
More on the User-Agent HTTP header you can find out on W3C (section 14.43).
I personally like WURFL because it is open source, it tells you more than if the device is mobile or not. The downside is that probably it does not contain info about all the latest mobile devices. But you can easily become a WURFL contributor and submit these info yourself into the WURFL database. Before doing these you should familiarize very well with the WURFL documentation.
I also like that the community is very active and the database contains approximately 7000 devices, making it a very effective method and most importantly with no false positives, unlike the next methods.
Moreover, WURFL has a library for accessing the XML database implemented in Java, .NET and PHP.

UAProf

If WURFL is a devices database, UAProf (User Agent Profile) is a capabilities database for a single device.
The mobile browser could contain an HTTP header usually named x-wap-profile and its value is an URL pointing to the profile described in RDF (see UAProf specs as PDF).
There are some serious downsides to this method:

  • The name of the HTTP header is not always x-wap-profile. It could also be wap-profile or xx-profile, where xx is a number. The Opt header can contain this number.
  • There is no standard regarding the capabilities naming and grouping
  • Not all the devices have UAProf
  • Not all the UAProfs are still available
  • Retrieving and parsing the UAProf can be quite time consuming

Altough you can use an UAProf to define a device in the WURFL database, which should be the preferred way.

Browser.isMobile (.NET dependent)

This is the method that I recommend the less because it is .NET dependent, not quite up-to-date and it doesn’t offer too many information about the device capabilities. Anyway for your reference I include it as well.

if (HttpContext.Current.Request.Browser["IsMobileDevice"] == "true") 
{
    // the browser IS a mobile device
}
else
{
    // the browser IS NOT a mobile device
}

.

Next steps

What you do next, after knowing with each type of device are you dealing with, it’s a different story. For sure I wouldn’t recommend you to create two versions of the same page. The best way will be to have only one version and to customize the layout using CSS. Then you definitely have to avoid the “evil” HTML table to build your layout. A lot of current mobile browser don’t handle very good nested tables. Here a method of finding out also the mobile device capabilities (such as screen width and height) will help you in building a better layout. Altough recommended will be to use percentages instead of fixed sizes.

Another way will be to use XSLT to transform the desktop version into the mobile one. Please keep in mind that the transformation should be made on the server side, as almost certain the device will not have this capacity. This is a good approach and you can even transform the page into WML (or even, why not, VoiceXML) but you will have to sacrifice some performance on the server side. This is acceptable as the mobile device version traffic has a lower bandwidth. I already wrote an XSLT server side transformer in .NET and should be as simple and straightforward to implement it in Java as well.

In conclusion, I would recommend to use a combination of the above methods for detecting mobile devices and creating mobile web pages.

Later edit: If you’re also interested in how you can test your mobile web pages please see the next article Testing web mobile pages.

Categories: Software, Web Tags: , ,
  1. October 14, 2008 at 9:45 am

    Did you look into DeviceAtlas? It’s another device database, you get information from public domain sources like UAProf and WURFL, but also from industry players such as Nokia, Vodafone, Argogroup, Volantis, etc.
    You can test devices with our test suite and submit results directly to the database. We have also recently opened a web interface to submit data.

    We also have a .NET API, of course.

  2. October 14, 2008 at 9:59 am

    I like more open source solutions.
    Paid solutions like yours, there are quite many on the market. On the other hand you cannot find too many open source solutions.
    I like WURFL because it is free, open source and it has a very active community. Anyone can become a contributor.

  3. October 21, 2008 at 11:03 pm

    There’s also another option. Instead of specifically detecting mobile devices, you can make the problem simpler by turning this approach upside down.

    See my post on “Not-Device” Detection : http://smartmobtoolkit.wordpress.com/2008/10/16/not-device-detection/

    Over the last 2 years we’ve found this is really reliable and has almost no maintenance issues – even when new model phones are added.

    And we implement it using the completely Open Source mod_rewrite directives which works with both Apache and IIS.

    You could easily do it as a perl/php script…but we find mod_rewrite is faster.

  4. October 21, 2008 at 11:25 pm

    If it’s only for recognition, your method could be fine, but WURFL offers a list of the device capabilities as well, which could be very useful on creating a better layout.

  5. October 23, 2008 at 12:28 am

    I agree WURFL has a detailed definition of device capabilities. However, with our sites and customers we’ve almost never found a real business case for defining specific exceptions on a per device basis.

    We do group devices into;
    – PC
    – iPhone
    – Windows Mobile/High-end Symbian and
    – Plain Old Mobile.

    Within Plain Old Mobile we also sometimes look for specific devices we know have limited memory or screen size.

    Other than that there just doesn’t seem to be enough of an increased benefit in return for the increased complexity of detailed WURFL style capability mapping.

    I’d love to hear some examples from anyone (other than a Telco) who has found a real business benefit from doing this.

  6. October 23, 2008 at 7:43 am

    Nice site you have

  7. October 27, 2008 at 12:13 pm

    A first example that comes to my mind is the image max size when automatically converting the usual images to images for mobile devices.

  8. November 5, 2008 at 9:39 pm

    If you’re really serious about the customer experience, you need to adapt your pages to all mobiles available. WURFL is a solution that can help you. I have also built my own (not based on wurfl), you can browse handset specs online and you’ll see rapidly that it’s a real mess with no standardisation:

    http://www.mobilemultimedia.be
    There is also a free API to implement server side mobile detecion.

  9. November 6, 2008 at 4:56 pm

    Unlike your solution, WURFL has more devices and user agents, a very active solution and it is totally FREE.

  10. don
    November 17, 2008 at 3:17 am

    you might want to check out handsetdetection.com too. They are offering a free service (which is nice)

  11. November 17, 2008 at 12:11 pm

    It is free, it has a lot of devices in its database, but I will still choose WURFL. Over this solution, the advantages are that it has a very big and active community behind and you can query its entire database offline.

  12. December 2, 2008 at 3:05 am

    Max image width is a good example as there is a ridiculous amount of diversity in that attribute. This topic alone can drive designers crazy…and auto transcoding images can lead to varying quality levels. Especially if they are animated gifs.

    We use WURFL as a valuable profiling tool to pre-categorise devices before we start our site planning.

    For max image width we’ve found that using “Not-Device” detection and then sub-grouping based on device type to be really efficient. This means you don’t need to do a profile lookup if it’s not a relevant device.

    For example we have 3 main mobile screen sizes.

    – 90-100px (depending on our target audience).
    – 150px
    – 230px

    A quick statistical analysis using WURFL will show you how efficient that is at cutting down the complexity from thousands of devices with over 130 unique widths … to 3.

  13. December 17, 2008 at 11:59 am

    Adrian, my solution is free, I’m using a quota based system to avoid being plundered with no “thank you”.

    I don’t know if WURLF has more device, it’s definitely big but size doesn’t matter when you’ve got more than 3000 devices🙂

    I don’t have a huge community, WURFL is the best in this area but I have thousands of real life mobile users using my API every month, it’s fairly enough to add new devices every day.

  14. January 27, 2009 at 6:46 pm

    You might also be interested in the two examples of “Not-Device Detection” code we’ve recently posted:

    Apache config
    http://smartmobtoolkit.wordpress.com/2009/01/25/not-device-detection-example-code/

    Javascript, perl and php
    http://smartmobtoolkit.wordpress.com/2009/01/26/not-device-detection-javascript-perl-and-php-code/

  15. July 7, 2009 at 8:42 pm

    Hi,
    I have published the last version of “Apache Mobile Filter”, this open source project have, in the first six months, more than 600 downloads from sourceforge and I think the same from CPAN.

    The Apache Mobile Filter allows you to access WURFL from any programming language, not just Java and php that is traditionally used for dynamic mobile web sites.

    The module detects the mobile device and passes the WURFL capabilities on to the other web application as environment variables. It can also be used to resize images on the fly to adapt to the screen size of the mobile device.

    Try it and let me know your opinion.

    For more info: http://www.idelfuschini.it/it/apache-mobile-filter-v2x.html

    Demo: http://apachemobilefilter.nogoogle.it/php_test.php

    • June 28, 2010 at 6:01 am

      Hi,

      I looked in the Wurfl xml and was curious because there is no mention of screen DPI anywhere in the file. Left this post in the Mobile Internet Devices FaceBook page:

      Help Please: I am building mobile web pages. I want to identify the screen resolutions(DPI). Is this possible through the DOM or a Browser caps function?
      I have written a WEB simulator, http://www.usgolfers.com/Mobile/Simulator.asp, which presents a fairly good representation of how a page appears in a iPhone, Droid, Win…dows Standard and Professional, iPad. I have tried creating png, gif and jpgs of the device’s resolution but with identical dimensions(20×20). But the browser displays them all as 96 DPI images. Yet if I download and open them in another computer they are indeed their true resolution. Anyone have any suggestions?

      Is there anyway to get the DPI from the Wurfl packet. With DPI dimensions and resolution information from the DOM or Browsercaps it’s easy to create a page nicely formatted to any device and also explode images to a related size.

      Thanks in advance for any help!
      Rich

      • June 28, 2010 at 10:49 am

        In the group display there are the following capabilities: (resolution_width, resolution_height) as the screen size in pixels and (physical_screen_width, physical_screen_height) as the screen size in millimeters. Taking this into account you can calculate DPI (or better PPI) as (resolution_width / (physical_screen_width * 0.03937), resolution_height / (physical_screen_height * 0.03937)). E.g. an iPhone will have 165 PPI.

  16. electroniccigarettes
    September 17, 2009 at 10:07 pm

    Great Post.

    Thank you for the info.

  17. Amit
    October 28, 2010 at 12:52 pm

    Take a look at http://51degrees.codeplex.com. It is an ASP.NET open source module which detects mobile devices and provides auto redirection to mobile optimized pages when request is coming from mobile device. It makes use of WURFL mobile device database. For redirection there is no need to modify existing ASP.NET web application pages.

    Apart from this it also gives upto-date mobile capability information like manufacturer, model, screen height & width, image formats supported and MANY MORE…… which helps to customize pages for best mobile output.

  18. Stefi
    September 22, 2011 at 9:31 am

    Any idea how to find out if a browser supports xslt transformation on client side?
    Can WURLF tell that?

    Based on this I would do the xslt transformation on the server side or allow the browser to do it client side.

    Thanks,
    Stef.

    • September 22, 2011 at 10:40 am

      Unfortunately there is no WURFL capability to tell you this (or not to my knowledge). Though it would make sense to add such a capability. You can propose it to the WURFL mailing list.
      The safe way (at least for mobile browsers) will be to do the transformation server side.

  19. October 10, 2011 at 1:18 pm

    Just few news about my project AMF.
    The official site is : http://www.apachemobilefilter.org
    And docs are at this url: http://wiki.apachemobilefilter.org

  20. January 10, 2013 at 4:53 am

    “Mobile device recognition « adrian’s blog” really makes myself think a little bit extra. I actually adored each and every particular component of this post. Thank you -Margarita

  21. Nellie
    March 29, 2013 at 10:43 pm

    Oh my. Mobile device recognition | adrian’s blog was a good read!. Beautiful.

  1. October 10, 2008 at 3:28 pm
  2. January 10, 2009 at 6:48 pm
  3. January 13, 2009 at 4:12 pm
  4. May 16, 2011 at 5:26 pm
  5. September 18, 2012 at 7:05 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: