Detect iOS Version Less Than 5 with JavaScript

Detect iOS version less than 5 with JavaScript

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.');
}

How to detect iOS 13 on JavaScript?

I would like to advice you against detecting operating system or browser from user agent, since they are susceptible to change more than an API for that does, till a reliable stable standard API lands. I have no idea about when this second part will happen.

However, I can suggest to detect feature instead if in this case it is applicable to you.

You can check if the anchor html element supports download attribute:

"download" in document.createElement("a") // true in supporting browsers false otherwise

That way you can display the appropriate html markup depending on the output for each case.
Something like that may help:

function doesAnchorSupportDownload() {
  return "download" in document.createElement("a")
}
// or in a more generalized way:
function doesSupport(element, attribute) {
  return attribute in document.createElement(element)
}

document.addEventListener("DOMContentLoaded", event => {
  if (doesAnchorSupportDownload()) {
    anchor.setAttribute("display", "inline"); // your anchor with download element. originally display was none. can also be set to another value other than none.
  } else {
    image.setAttribute("display", "inline"); // your alone image element.  originally display was none. can also be set to another value other than none.
  }
});

For example, I use following to detect if I am on an ar quick look supporting browser on iOS:

function doesSupportAnchorRelAR() {
  return document.createElement("a").relList.supports("ar");
}

You can also use techniques documented below:
http://diveinto.html5doctor.com/detect.html#techniques

Detect if device is iOS

Detecting iOS

With iOS 13 iPad both User agent and platform strings are changed and differentiating between iPad and MacOS seems possible, so all answers below needs to take that into account now.

This might be the shortest alternative that also covers iOS 13:

function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

iOS will be either true or false

Worse option: User agent sniffing

User Agent sniffing is more dangerous and problems appear often.

On iPad iOS 13, the user agent is identical with that of a MacOS 13 computer, but if you ignore iPads this might work still for a while:

var iOS = !window.MSStream && /iPad|iPhone|iPod/.test(navigator.userAgent); // fails on iPad iOS 13

The !window.MSStream is to not incorrectly detect IE11, see here and here.

Note: Both navigator.userAgent and navigator.platform can be faked by the user or a browser extension.

Browser extensions to change userAgent or platform exist because websites use too heavy-handed detection and often disable some features even if the user's browser would otherwise be able to use that feature.

To de-escalate this conflict with users it's recommended to detect specifically for each case the exact features that your website needs. Then when the user gets a browser with the needed feature it will already work without additional code changes.

Detecting iOS version

The most common way of detecting the iOS version is by parsing it from the User Agent string. But there is also feature detection inference*;

We know for a fact that history API was introduced in iOS4 - matchMedia API in iOS5 - webAudio API in iOS6 - WebSpeech API in iOS7 and so on.

Note: The following code is not reliable and will break if any of these HTML5 features is deprecated in a newer iOS version. You have been warned!

function iOSversion() {

  if (iOS) { // <-- Use the one here above
    if (window.indexedDB) { return 'iOS 8 and up'; }
    if (window.SpeechSynthesisUtterance) { return 'iOS 7'; }
    if (window.webkitAudioContext) { return 'iOS 6'; }
    if (window.matchMedia) { return 'iOS 5'; }
    if (window.history && 'pushState' in window.history) { return 'iOS 4'; }
    return 'iOS 3 or earlier';
  }

  return 'Not an iOS device';
}

How can I detect specific iOS version with jquery?

You can detect iOS version using the navigator.userAgentstring. Something like:

if(/(iPhone|iPad|iPod)\sOS\s6/.test(navigator.userAgent)) {
    // use apple maps
}

Note that this is in no way future proof, user agent strings can change, and so will the OS. Also AFAIK, google maps via the browser is available on all platforms, including iOS 6.

Detect iOS 5 or Higher with JavaScript

You're checking if ver[0] >= 5, but if it's not iOS, ver is undefined, so you have to check if it's defined first :

function iOSversion() {
    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
    }
}

var ver = iOSversion();

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

How can I detect specific iOS version with jquery?

You can detect iOS version using the navigator.userAgentstring. Something like:

if(/(iPhone|iPad|iPod)\sOS\s6/.test(navigator.userAgent)) {
    // use apple maps
}

Note that this is in no way future proof, user agent strings can change, and so will the OS. Also AFAIK, google maps via the browser is available on all platforms, including iOS 6.

How to detect that browser is running in Safari on iOS 11 via JavaScript?

Check out this solution, and then you could do something like this:

ver = iOSversion();

if (ver[0]==11) {
    // do something
}

The shared snippet can also be used to detect any specific iOS version, >iOS 2.

---

Related Topics