Detect iOS version less than 5 with JavaScript

Asked 1/12, 2011 at 20:53 Answered 26/4, 2018 at 6:0

This is related to the "fix" for position:fixed in older versions of iOS. However, if iOS5 or greater is installed, the fix breaks the page.

I know how to detect iOS 5: navigator.userAgent.match(/OS 5_\d like Mac OS X/i) but that won't work for iOS6 when it eventually comes around, or even iOS 5.0.1, only a 2 digit version.

So this is what I have atm.

$(document).bind("scroll", function() {
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
        if (navigator.userAgent.match(/OS 5_\d like Mac OS X/i)) {
    }
    else {
        changeFooterPosition();
    }
});

Ceto answered 1/12, 2011 at 20:53 Comment(3)

Have you tried feature-based detection instead of user agent sniffing? I found this but I'm not able to test it currently. – Kenishakenison 1/12, 2011 at 21:0

There's a script for testing by looking for support for position:fixed, but it's fairly complicated, and beyond my limited skills. And I think it would slow things down. – Ceto 1/12, 2011 at 21:12

The problem of user agent sniffing is that http clients are often able to change their user-agent and you are hardcoding your fixes to limited number of browsers. Also the slow-down is minimal as it is something that should be executed only once and definitely not multiple times (like in event handlers). You don't need to understand that script. You don't understand everything you use in jQuery I guess :). – Kenishakenison 1/12, 2011 at 21:18

137

This snippet of code can be used to determine any version of iOS 2.0 and later.

function iOSversion() {
  if (/iP(hone|od|ad)/.test(navigator.platform)) {
    // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
  }
}

ver = iOSversion();

if (ver[0] >= 5) {
  alert('This is running iOS 5 or later.');
}

Realtor answered 8/1, 2013 at 21:0 Comment(7)

Thanks for coming up with this solution! The only thing I would change: gist.github.com/rafaelrinaldi/5873671 This way I'm able to do an actual numeric comparison instead of checking the string value of the first index of my result. – Reciprocal 27/6, 2013 at 3:11

In my experience, an iPod touch actually returns "iPod touch" from navigator.platform, so I use the RegExp /iP(hone|od touch|ad)/ to catch it too. – Thrill 28/4, 2015 at 18:0

Chrome gives true for this also :( I suggest to add return -1 after the if-statement – Selfpropelled 6/10, 2015 at 15:21

do you know what this would return on android devices? i just added 'else return null', so hopefully that can indicate a non-ios device – Crackbrain 18/7, 2017 at 2:56

Really really helpful. I was looking to catch this bug and its reason since years. Thanks! – Agamic 22/1, 2019 at 13:6

To prevent console error "uncaught typeerror cannot read property '0' of undefined" in desktop browsers, [ie non ios] ADD "return false;" after first "if" statement ... return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)]; } else { return false; } – Climb 24/7, 2019 at 4:20

This does not work on iPad iOS >= 13: #57766458 – Genvieve 30/3, 2022 at 11:42

Pumbaa80's Answer was almost 100%, he just left out one part. Some iOS release have a third digit on them.

Example

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en_us) AppleWebKit/525.18.1 (KHTML, like Gecko)

The follow allows for that

if(/(iPhone|iPod|iPad)/i.test(navigator.userAgent)) { 
    if(/OS [2-4]_\d(_\d)? like Mac OS X/i.test(navigator.userAgent)) {  
        // iOS 2-4 so Do Something   
    } else if(/CPU like Mac OS X/i.test(navigator.userAgent)) {
        // iOS 1 so Do Something 
    } else {
        // iOS 5 or Newer so Do Nothing
    }
}

That extra bit (_\d)? allows for the possibility of a third digit in the Version number. Charlie S, That should answer your question too.

Note the else because the 1st check won't work on iOS 1. iOS 1 for the iPhone and iPod didn't include a version number in its UserAgent string.

iPhone v 1.0

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

iPod v1.1.3

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

All of this can be found at the following link on Apples website here.

Maimaia answered 20/6, 2012 at 23:29 Comment(2)

Is there anyway I can get only iOS version between 8.1.1 to 8.2, It will be much helpful if we test range between iOS version – Tamaru 16/4, 2015 at 14:27

The link to Apple's website is dead. – Triphammer 13/6, 2017 at 17:7

I could not really find what I was looking for, so I took ideas from this page and other pages around the net and came up with this. Hopefully others will find it useful as well.

function iOS_version() { 
    if(navigator.userAgent.match(/ipad|iphone|ipod/i)){ //if the current device is an iDevice
    var ios_info ={};
    ios_info.User_Agent=navigator.userAgent;
    ios_info.As_Reported=(navigator.userAgent).match(/OS (\d)?\d_\d(_\d)?/i)[0];
    ios_info.Major_Release=(navigator.userAgent).match(/OS (\d)?\d_\d(_\d)?/i)[0].split('_')[0];
    ios_info.Full_Release=(navigator.userAgent).match(/OS (\d)?\d_\d(_\d)?/i)[0].replace(/_/g,".");
    ios_info.Major_Release_Numeric=+(navigator.userAgent).match(/OS (\d)?\d_\d(_\d)?/i)[0].split('_')[0].replace("OS ","");
    ios_info.Full_Release_Numeric=+(navigator.userAgent).match(/OS (\d)?\d_\d(_\d)?/i)[0].replace("_",".").replace("_","").replace("OS ","");   //converts versions like 4.3.3 to numeric value 4.33 for ease of numeric comparisons
    return(ios_info);
    }
}

It allows you to get the major release and full release number either as a string or as a number for iOS.

Example User Agent String:

    Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329

Usage:

var iOS=iOS_version();
console.log(iOS.Full_Release); //returns values in form of "OS 6.1.3"
console.log(iOS.Full_Release_Numeric); //returns values in form of 6.13
//useful for comparisons like if(iOS.Full_Release_Numeric >6.2)

console.log(iOS.Major_Release); //returns values in form of "OS 6"
console.log(iOS.Major_Release_Numeric); //returns values in form of 6
//useful for comparisons like if(iOS.Major_Release_Numeric >7)

console.log(iOS.As_Reported); //returns values in form of "OS 6_1_3"
console.log(iOS.User_Agent); //returns the full user agent string

In the case of the original question on this page, you could use this code in the following manner:

var iOS=iOS_version();
$(document).bind("scroll", function() {
    if(iOS){if(iOS.Major_Release_Numeric <5) {} 
    else {changeFooterPosition();}
    }
});

Buke answered 26/4, 2018 at 6:0 Comment(0)

Adding on to Pumbaa80's answer. The version string might be 4_0, 5_0_1, 4_0_4, etc., and so testing against [1-4]_/d (a single underscore and number) isn't adequate. The JavaScript below is working for me for various sub-versions of iOS 3-5:

if (/(iPhone|iPod|iPad)/i.test(navigator.userAgent)) {
    if (/OS [1-4](.*) like Mac OS X/i.test(navigator.userAgent)) {
      // iOS version is <= 4.
    } else {
      // iOS version is > 4.
    }
  }

Madge answered 20/6, 2012 at 17:46 Comment(0)

Here's a bit of JS to determine iOS and Android OS version.

Tested with actual user agent strings for iOS 4.3 to 6.0.1, and Android 2.3.4 to 4.2

var userOS;    // will either be iOS, Android or unknown
var userOSver; // this is a string, use Number(userOSver) to convert

function getOS( )
{
  var ua = navigator.userAgent;
  var uaindex;

  // determine OS
  if ( ua.match(/iPad/i) || ua.match(/iPhone/i) )
  {
    userOS = 'iOS';
    uaindex = ua.indexOf( 'OS ' );
  }
  else if ( ua.match(/Android/i) )
  {
    userOS = 'Android';
    uaindex = ua.indexOf( 'Android ' );
  }
  else
  {
    userOS = 'unknown';
  }

  // determine version
  if ( userOS === 'iOS'  &&  uaindex > -1 )
  {
    userOSver = ua.substr( uaindex + 3, 3 ).replace( '_', '.' );
  }
  else if ( userOS === 'Android'  &&  uaindex > -1 )
  {
    userOSver = ua.substr( uaindex + 8, 3 );
  }
  else
  {
    userOSver = 'unknown';
  }
}

Then to detect a specific version and higher, try:

if ( userOS === 'iOS' && Number( userOSver.charAt(0) ) >= 5 ) { ... }

Satisfaction answered 25/11, 2012 at 8:21 Comment(0)

First: Don't use match when a test is enough.

Second: You should test the other way round. Find the UAs which are known to be broken.

if(/(iPhone|iPod|iPad)/i.test(navigator.userAgent)) {
    if (/OS [1-4]_\d like Mac OS X/i.test(navigator.userAgent)) {
        changeFooterPosition();
...

Nicknickel answered 1/12, 2011 at 22:52 Comment(3)

Third: Don't do UA test inside a handler :). – Kenishakenison 2/12, 2011 at 0:22

Absolutely! The $().bind() should be moved inside the if block. – Nicknickel 2/12, 2011 at 8:4

The code above returns false for me when browsing with ...iPad; U; CPU OS 4_3_3 like Mac OS X.... What am I missing? – Madge 20/6, 2012 at 16:49

Just simply run this code in device/browser

if(window.navigator.userAgent.match( /iP(hone|od|ad)/)){

    var iphone_version= parseFloat(String(window.navigator.userAgent.match(/[0-9]_[0-9]/)).split('_')[0]+'.'+String(window.navigator.userAgent.match(/[0-9]_[0-9]/)).split('_')[1]);

    // iPhone CPU iPhone OS 8_4 like Mac OS X

    alert(iphone_version); // its alert 8.4

    if(iphone_version >= 8){
       alert('iPhone device, iOS 8 version or greater!');
    }
}

This iphone_version variable will give you correct OS version for any iPhone device.

Coleencolella answered 1/9, 2015 at 11:31 Comment(1)

/[0-9]_[0-9]/)).split('_')[0] won't identify 10+, not sure if 10+ was there when this answer was written. – Jarlath 1/8, 2019 at 6:13

function getIOSVersion() {
    const ua = navigator.userAgent;
    if (/(iPhone|iPod|iPad)/i.test(ua)) {
        return ua.match(/OS [\d_]+/i)[0].substr(3).split('_').map(n => parseInt(n));
    }
    return [0];
}

This will return an array with the individual version numbers like [10,0,1] for v10.0.1, or it'll default to [0] otherwise. You can check the first digit (the major version) or all of them to test for the versions you need.

Alesiaalessandra answered 22/12, 2017 at 18:53 Comment(0)

Further parse out the version number ("5"), then add a condition where if number is greater than / less than version number.

Hygroscopic answered 1/12, 2011 at 20:58 Comment(1)

Something like? $(document).bind("scroll", function() { if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { if (match = /iPhone OS (.*) like Mac OS X/.exec(navigator.userAgent)) { var version = parseInt(match[1].replace('_', ''), 10) / 100; if (version < 5) { changeFooterPosition(); } } } }); – Ceto 1/12, 2011 at 21:22

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags