Detect if browser is running on an Android or iOS device

I need to change out some buttons and text on a mobile website depending on whether the user is viewing it on an Android or iOS browser. Is there a reliable way to perform the check?

Solution 1:

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

Solution 2:

I would use the navigator.useragent property to get the useragent-string, parse it, and detect the OS.

Here is one example of how you can do it.

Update:

Due to the popularity of this question, I thought I would add some additional information to my answer.

In general, browser sniffing is almost never the best way to go. Why? Well, there are many reasons, but here are two good ones:

1. In almost all cases when people turn to browser sniffing, feature detection would be a better option. There are rare edge cases where it might be appropriate to act depending on what OS/browser the user might be using, but for the most part, using a library like Modernizr to detect support for a specific feature is a better way to go. Trying to adapt your site/application to specific browsers rather than the features they support is a slippery slope. Instead check if the browser support the features you need, and polyfill or provide nice fallbacks when support is lacking.
2. Browser sniffing is extremely complicated. Why? Because almost every browser lie in their user agent string or lack sufficient information to allow a certain identification.

With that said, if you really really need to use browser/OS detection, then don't reinvent the wheel, and don't try to do it on your own - you will be in for a world of pain and obscure caveats! I would suggest you use a library like WhichBrowser, that will provide you with a handy JavaScript object containing information about the os, browser, rendering engine and device.

Solution 3:

You could use the navigator object: http://www.w3schools.com/js/js_browser.asp and then use if statements based on the properties of navigator.