69

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?

soleil
  • 12,133
  • 33
  • 112
  • 183
  • 3
    possible duplicate of [Detect Android phone via Javascript / jQuery](http://stackoverflow.com/questions/6031412/detect-android-phone-via-javascript-jquery) – Adriano Carneiro Sep 26 '12 at 16:28

4 Answers4

153
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());
    }
};
Entity
  • 7,972
  • 21
  • 79
  • 122
Anoop
  • 23,044
  • 10
  • 62
  • 76
  • Unfortunately, android phones and tablets will be recognized as mobile so the tablet will end up with the phone view. – Sinaesthetic Aug 23 '13 at 20:52
  • 1
    On my iPad mini the iOS function works in safari, but not when using google chrome. On my iPhone 5 it works both in safari and chrome. Edit: I have iOS 7 on the iPhone, and iOS6 on the iPad – Njaal Gjerde Sep 18 '13 at 12:36
  • To future users wanting to report breakage here, please include user agent strings. – lulalala Aug 12 '14 at 09:33
  • 8
    **The order of the platforms should be changed with Windows Phone coming first.** Since many websites do use this kind of OS detection, but ignore Windows Phone, Microsoft decided to put "Android" and "iPhone" into the userAgent String as well. I used this answer for my website, but my Lumia 1520 always got recognized as an android device. So, before testing for Android and iOS, you should test for "IEMobile". – Kilian Obermeier Sep 27 '15 at 08:39
  • @Anoop should update his answer and put windows phone first to address the bug mentioned in the previous comment by andrino. – Justin Oct 27 '15 at 18:29
12

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.

Christofer Eliasson
  • 32,939
  • 7
  • 74
  • 103
1

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.

-1

I have used this for awhile. Simple check to see return true or false based on is a mobile device.

var isMobile = (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Windows Phone/i.test(navigator.userAgent)) ? true : false;
meme
  • 11,861
  • 2
  • 19
  • 20