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?

Solution 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

Solution 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

Solution 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

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

Solution 5

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;
    }
}

View more solutions

Comments

[Daniel Ryan]

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.

[jfriend00]

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.

[Daniel Ryan]

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

[jfriend00]

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.

[Daniel Ryan]

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

[jfriend00]

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.

[Daniel Ryan]

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.

[jfriend00]

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.

[Daniel Ryan]

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

[jfriend00]

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.

[Daniel Ryan]

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.

[Gohel Kiran]

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

[craigpatik]

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

[Roman Holzner]

parseFloat only takes one argument: Fixed it

[Daniel Ryan]

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

[Alexey]

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

[Machavity]

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

[Vexter]

@Alexey 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.

[user1613797]

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

[Ishita Sinha]

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.

[CatalinBerta]

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