Detecting Mobile Devices with JavaScript

November 23, 2011

While I understand and value the concept of feature detection over browser detection, sometimes the need for knowing whether or not we’re dealing with a mobile device arises.  For in-depth device checking, you can rely on a complex library such as The MobileESP Project.  But for simpler applications, the following snippet can be useful.

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

While this doesn’t account for all mobile platforms, it will pick up the most popular ones out there.

Examples

To check to see if the user is on any of the supported mobile devices:

if( isMobile.any() ) alert('Mobile');

To check to see if the user is on a specific mobile device:

if( isMobile.iOS() ) alert('iOS');

By Cory LaViska

Cory LaViska

Cory has worked on the web for over a decade. Currently, he runs Surreal CMS and a handful of online tools for web developers. He’s also responsible for the blog you’re reading right now.

Discussion

This discussion is now closed. If you want to leave feedback, you’re welcome to do so on Twitter.

  1. A more sophisticated solution could be Apache Mobile filter. It’s also possible to use a device repository like wurfl or detectright.

    December 5th, 2011Idel
  2. Indeed, there are more sophisticated solutions (as mentioned in the post) that should definitely be considered for more serious implementations. However, for things like jQuery plugins that need to deactivate themselves or act differently for a mobile browser, the above snippet will typically be sufficient (and probably more portable).

    December 5th, 2011Cory LaViska
  3. Great bit of code! Really simple, elegant solution that did the job perfectly.

    August 12th, 2012Jack
  4. Great script! Works great. Thanks.

    August 17th, 2012Stephen Apple
  5. Thanks a lot…works like a charm!

    August 25th, 2012sai krishna
  6. Really cool, deserve some compliments!

    October 4th, 2012Pedro
  7. Awesome!

    December 11th, 2012Mudaser
  8. Thanks so much! It works great!

    December 11th, 2012huynh hieu
  9. Thanks! You saved me a boatload of time. I appreciate it.

    December 17th, 2012Ferger
  10. Awesome…works for me :) Thank you!

    December 19th, 2012daboja
  11. Works great. Nice, clean, easy to read code! Thanks for the example.

    December 21st, 2012JohnS
  12. Hi! We just wanted to say thank you for this really handy post, you helped us out of a tight spot. Thanks again!

    January 2nd, 2013everydaydream
  13. Yep, this seems to work. I haven’t done extensive testing but works in iOS so far.
    Great work, thank you very much.

    January 16th, 2013James
  14. Thanks :)

    January 31st, 2013kwangkung
  15. Compliment: Elegant, simple and just what I was looking for. Thank you for posting it!

    March 9th, 2013deborah
  16. Thank you! Searched for exactly that to just change the onclick handler to a ontouch handler for mobile devices to get rid of the 300ms delay.

    March 14th, 2013Thomas
  17. Thomas, you might want to consider checking for touch support this way instead:

    var hasTouch = 'ontouchstart' in document.documentElement;
    March 14th, 2013Cory LaViska
  18. Thank you! Nice JS “snippet” :)

    April 5th, 2013Davide De Maestri
  19. FYI: for the new generation Blackberry Z10 (running BB10), you can modify the “BlackBerry” function by adding:

    || navigator.userAgent.match(/BB10; Touch/)

    After the initial check. The new userAgent strings don’t contain the word “BlackBerry” in them (though they do include the phrase “AppleWebKit”).

    April 7th, 2013Re: BlackBerry / BB10
  20. What’s the code to differentiate between iPad and iPad retina?

    April 12th, 2013Sandy
  21. How about detection for the Kindle or game browsers (Wii, XBox)?

    April 15th, 2013Justin Geeslin
  22. This is exactly what i was looking for. I’m not the best developer so simple stuff like this is what i use.

    May 14th, 2013Kev
  23. Clean code, does the trick, thanks for this!

    June 5th, 2013Phil
  24. As Cory suggested, it is advisable not to use User Agents for device detection. Device name types will change in the future. The aim is to ensure great user browser experience across many devices not various devices for good browser experience.

    The secret is to detect for mobile and browser rendering engine which will cover all devices. All user agents have the word mobile in modern ua strings found in the modern mobile browser “navigator” object. an increasing number of desktops and laptop now have touch screens which means having to differentiate between the two mediums and having to have a fall back where necessary.

    Detecting touch will allow design for touch and non-touch screen device:

    var hasTouch = 'ontouchstart' in document.documentElement;
    

    Detecting mobile will allow design for desktop or mobile.

    var ismobi = navigator.userAgent.match(/Mobi/i);
    

    Here is an informative link for further details.

    July 16th, 2013Owen
  25. This doesn’t work for the Nexus 7 tablet. The user agent string does not contain the word “Android”.

    August 22nd, 2013Nano
  26. You will execute match 5 times in any, better is to use just one regex:

    any: function() {
        return navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);
    }
    
    August 23rd, 2013Jakub Jankiewicz
  27. True, but since the expressions are evaluated on the client’s side the difference is negligible.

    August 23rd, 2013Cory LaViska
  28. No doubt, this is the best solution I’ve ever seen!

    October 6th, 2013Gustav GB
  29. Very cool, thanks for the solution!

    October 29th, 2013Marsant