Detect Android phone via Javascript / jQuery

Question

How would i detect that the device in use is an Android for a mobile website?

I need to apply certain css attributes to the Android platform.

Thanks

Michael Lumbroso · Accepted Answer · 2018-03-19T15:52:56.310

230

Take a look at that : http://davidwalsh.name/detect-android

JavaScript:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
  window.location = 'http://android.davidwalsh.name';
}

PHP:

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
  header('Location: http://android.davidwalsh.name');
  exit();
}

Edit : As pointed out in some comments, this will work in 99% of the cases, but some edge cases are not covered. If you need a much more advanced and bulletproofed solution in JS, you should use platform.js : https://github.com/bestiejs/platform.js

edited Mar 19 '18 at 15:52

answered May 17 '11 at 13:27

Michael Lumbroso

4,671
5
23
34

5

don't forget to also check for android tablets: http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html – May 17 '11 at 13:35
2

It's worth noting that this does not always work for android devices as, for example, the user agents which are reported by Kindle Fire HD devices do not contain the word 'android' at all. – djbp Jun 11 '13 at 13:54
Different versions of Android have different features, how about adding version detection? Useful when segmenting Gingerbread from Jelly Bean. The older doesnt support positon: fixed, just for example. So, things like backstretch won't work on Gingerbread. See: http://stackoverflow.com/questions/7184573/pick-up-the-android-version-in-the-browser-by-javascript – Slopeside Creative Aug 09 '13 at 18:12
3

The navigator.userAgent approach doesnt work on samsung galaxy devices. There's no 'Android' in the browser spec. – AsafK Feb 06 '14 at 00:18
2

The first two lines of the JS solution can be simplified to: `var isAndroid = /Android/i.test(navigator.userAgent)` – Dave Koo Jun 03 '14 at 20:00
4

Your solution doesn't work. Here is a Nokia Lumia user agent. And Guess what? it matches as android : `Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 625; Orange) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537` – Sam Jason Braddock Dec 16 '15 at 09:30

score 52 · Answer 2 · answered Jan 30 '15 at 13:17

How about this one-liner?

var isAndroid = /(android)/i.test(navigator.userAgent);

The i modifier is used to perform case-insensitive matching.

Technique taken from Cordova AdMob test project: https://github.com/floatinghotpot/cordova-admob-pro/wiki/00.-How-To-Use-with-PhoneGap-Build

Phillip Senn · Answer 3 · 2015-07-07T15:53:19.237

;(function() {
    var redirect = false
    if (navigator.userAgent.match(/iPhone/i)) {
        redirect = true
    }
    if (navigator.userAgent.match(/iPod/i)) {
        redirect = true
    }
    var isAndroid = /(android)/i.test(navigator.userAgent)
    var isMobile = /(mobile)/i.test(navigator.userAgent)
    if (isAndroid && isMobile) {
        redirect = true
    }
    if (redirect) {
        window.location.replace('jQueryMobileSite')
    }
})()

score 2 · Answer 4 · answered Mar 04 '15 at 01:19

2

I think Michal's answer is the best, but we can take it a step further and dynamically load an Android CSS as per the original question:

var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {
    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", "/css/android.css");
    document.body.appendChild(css);
}

answered Mar 04 '15 at 01:19

drlarsen

31
2

1

Why would you want to do that, while you can use media queries? JS device detection should be only for enhancement, like adding an invitation to install your app. The page rendering never should rely on it because you will have performance issues and a horrible usability experience. – camilokawerin Apr 01 '16 at 22:13
1

@camilokawerin Your response should be directed to the author. I was simply providing an answer to his question. There are cases though where you'd like platform specific CSS. For example, if you want the visual style of the interface to match the device. – drlarsen Apr 05 '16 at 21:15

score -2 · Answer 5 · answered Nov 07 '13 at 13:21

-2

js version, catches iPad too:

var is_mobile = /mobile|android/i.test (navigator.userAgent);

answered Nov 07 '13 at 13:21

jonny

3,111
9
41
57

3

Doesn't work because it catches many devices, not just Android as the question requires. – NickG Dec 20 '13 at 09:57
1

Use at least something like this: /android.*(?=mobile)/i.test(navigator.userAgent); to detect Android phone. But this regex contains "expensive" quantifiers, so Philip's answer with 2 separate tests may be more appropriate. – Vadim P. Jul 31 '15 at 16:07

Detect Android phone via Javascript / jQuery

5 Answers5

Linked