Pick up the Android version in the browser by Javascript

Question

I'm building a web app and wanting to disable transitions effects on Android devices under version 3.0.

Is there anyway to pick up the Android version number by Javascript in the browser? If so how?

Ariellearies

if you are on cordova, you can use device.version – Archbishopric

Answer 1

function getAndroidVersion(ua) {
    ua = (ua || navigator.userAgent).toLowerCase(); 
    var match = ua.match(/android\s([0-9\.]*)/i);
    return match ? match[1] : undefined;
};

getAndroidVersion(); //"4.2.1"
parseInt(getAndroidVersion(), 10); //4
parseFloat(getAndroidVersion()); //4.2

Julijulia

parseFloat only takes one argument, so no need for the ,10 at the end. (I'd edit it myself, but edits have to change at least 6 characters.) – Faustofaustus

parseFloat only takes one argument: Fixed it – Engedus

From the comment below from andy, user agent can be: "Linux;Android ; Release/4.1.2" Meaning this would fail on those Motorola devices. – Ariellearies

I think you should add , 10 at the end, otherwise if the number starts with 0, it will parse it as an octal number. Just try to execute the following: alert(parseInt(021)). You will see 17, not 21 – Redress

I agree with user1613797, parseInt takes a second optional argument, which is the radix/base. Specifying it as 10 helps with numbers that start with 0 and ensuring they are not treated as octal numbers – Cantillate

Answer 2

Use below code to get 2 digit version of Android

var ua = navigator.userAgent;
if( ua.indexOf("Android") >= 0 )
{
  var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8)); 
  if (androidversion < 2.3)
  {
      // do whatever
  }
}

For example

Mozilla/5.0 (Linux; U; Android 2.2.1; fr-ch; A43 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

will return Android Version = 2.2

Originally

If you like my answer and is useful to you, plz vote up & accept answer – Originally

Using indexOf + 8 is a really bad practice when you know pretty much nothing about input string. – Lingwood

@Lingwood the script already checks if Android is present in the string (2nd line). So I would disagree that this is a blind indexOf operation since it will always return the position which marks the end of the Android string plus one character. – Guerrilla

Answer 3

I can't comment because I don't have enough rep... Just wanted to add that I had to change neiker's code to

var match = ua.match(/Android\s([0-9\.]*)/i);

to make it case insensitive because the Galaxy S3 was returning "android" instead of Android in its user agent

Isocyanide

Answer 4

You can look at the user agent string - window.navigator.userAgent described here: https://developer.mozilla.org/en/DOM/window.navigator.userAgent

If what you're really trying to detect is whether you have a version of the browser that supports a particular feature, then it's nearly always better to use feature detection instead of browser version detection. modernizr is a huge base of code for feature detection that you can either use as is or borrow one particular piece from or just learn how the general technique works.

When I Google, I see user agent strings like this for Android:

Mozilla/5.0 (Linux; U; Android 2.2.1; fr-ch; A43 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

A regex of /Android\s+([\d\.]+)/ on window.navigator.userAgent will pick up the Android version number.

Discobolus

Yeah I guessed as much, but looking for the code :) I don't want to get it wrong. There are a lot of android devices out there, I'm guessing they all wouldn't be the same. – Ariellearies

I'd suggest you do some Googling for various lists of user agents. There are pages that show what lots of user agents are. You may be better off with feature detection which I added a paragraph to my answer about. – Discobolus

No not looking for feature detection. The jquery mobile transitions work fine, they are just slow on the older android devices. But thanks anyway. – Ariellearies

Your particular case is more about "performance detection". What you need is CSS3 transitions which are done natively via CSS3, not with JS with jQuery fallback when CSS3 isn't supported. I've written a slideshow with quite fancy CSS3 transitions that works on all versions of Android devices. You might want to check out: addyosmani.com/blog/css3transitions-jquery. – Discobolus

Thanks but I believe jQuery mobile is already uses CSS3 for it's transitions. – Ariellearies

I can't find anything that says jQuery mobile will use CSS3 for transitions. If it did, I don't think it would be too slow on any Android device. – Discobolus

Looks like it does: jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/… They will be speeding it up in the next version so I just wanted to temporary not show them on the older devices for now until they do. – Ariellearies

Didn't know you were talking about page transitions as opposed to an individual object animation. If you want to do user agent detection, then you will need to Google until you find out what the relevant user agent strings are that you're looking for. – Discobolus

Yeah I did Google, nothing, which is why I posted here :) – Ariellearies

I added info about the user agent string to my answer. I'm not sure why you couldn't find it with Google. Plus if you have any Android devices, there are lots of web sites that will show you what the user agent is for the viewing device: whatsmyuseragent.com. – Discobolus

I miss understood. Yeah I could have found the user agent. I'm using the webview not a browser so I'll see if your regex still works. Thanks for all your help, I'm sure I can get something working now, really it doesn't matter if it fails on some devices. – Ariellearies

Answer 5

Motorola's player user agents can have the following:

Linux;Android ; Release/4.1.2

So, I've had to start using the the following regex:

[a|A]ndroid[^\d]*([\d[_|.]]+\d)

Teleutospore

Answer 6

This code checks the full version of Android from the useragent.

var test = LowerThanAndroidVersion('4.4');
if (test) {
    alert('lower than android 4.4')
} else if (test == undefined) {
    alert('no android')
} else {
    alert('android 4.4 or higher');
}    

function LowerThanAndroidVersion(testversion) {
    //var useragent = 'Mozilla/5.0 (Linux; U; Android 4.3.1; en-gb; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30';
    var useragent = navigator.userAgent;
    var androidpoint = useragent.indexOf('Android');
    if (androidpoint >= 0) {
        var rest = useragent.substring(androidpoint + 8, useragent.length);
        var version = rest.substring(0, rest.indexOf(';'));
        return (version < testversion) ? true : false;
    }
}

Neology

Please explain your answer. SO exists to teach, not just answer questions. – Arteriotomy

Answer 7

I made this function and worked very well in Android 2.6.3, 4.2.2., 6.0.1 in different browsers and devices. I think that can be an alternative.

function check_android_version()
{
    var ua = navigator.userAgent; 
    ua = ua.toLowerCase();

    var and_pos = ua.search("android");
    if(and_pos == -1)
        return 0; //not android

    var pv_pos = ua.indexOf(";", and_pos);
    var versao = ua.slice(and_pos+8, pv_pos);

    return versao;
}

This is quite simple, first, search for the word "android". If not found, returns 0 (is not an Android user agent). Then search for the first ';' after the "android" position that marks the end of the version. Once these positions are gotten, the 'slice' insulates the version numbers (that '+8' removes the word "android" of the final result) an then returns.

If someone find any flaw, would be nice to share.

Lanettelaney

Answer 8

It's better to check first if device is android or not as Windows mobile can have Android in its user agent.

Example: Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; ; ) AppleWebKit/ (KHTML, like Gecko) Chrome/ Mobile Safari/ Edge/.

Here is way to check it Detecting iOS / Android Operating system

Carltoncarly

While the link may answer the question, it is always best to add key information from that link to the answer, in case the link ceases to exist. – Coldshoulder

Answer 9

1- Windows phone introduced a fake "android" user agent, so this deal with it
2- As @andy pointed out, there are some models with this format: Android/#.##
3- You can use the flag /i for case-insensitive
4- This code gives you back NaN when its not android and the version as a float when it is.
5- If you find more fake android phones you only need to add the string like this: (?:windows phone|fake phone|android...........

alert( parseFloat(navigator.userAgent.match(/.*?(?:windows phone|android\D+([0-9\.]*))|()/i)[1]) );

Jamaaljamaica