JavaScript logo

Detecting Mobile Devices with JavaScript

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');

About the author

Cory LaViska is a founder, web developer, and bootstrapper based in New Hampshire. His current focus is on Surreal CMS, an awesome SaaS content management service for web designers. Need to get in touch? You can connect with him on Twitter.

Comments

  1. Idel says:

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

  2. Cory LaViska says:

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

  3. everydaydream says:

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

  4. James says:

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

  5. deborah says:

    Compliment: Elegant, simple and just what I was looking for. Thank you for posting it!

  6. Thomas says:

    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.

    • Cory LaViska says:

      Thomas, you might want to consider checking for touch support this way instead:

      var hasTouch = 'ontouchstart' in document.documentElement;
  7. Re: BlackBerry / BB10 says:

    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”).

  8. Kev says:

    This is exactly what i was looking for. I’m not the best developer so simple stuff like this is what i use.

  9. Owen says:

    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.

  10. Nano says:

    This doesn’t work for the Nexus 7 tablet. The user agent string does not contain the word “Android”.

  11. Jakub Jankiewicz says:

    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);
    }
    
    • Cory LaViska says:

      True, but since the expressions are evaluated on the client’s side the difference is negligible.