How to detect iOS 13 on JavaScript?

Question

I use this function to detect iOS

export function isiOS() {
  return navigator.userAgent.match(/ipad|iphone/i);
}

is there any way to make it detected iOS13+? thanks

Why do I need it? usually, iOS safari can't download files therefore to make image downloadable I should render it as

<img src={qrImage} alt="creating qr-key..." />

however on Android/PC and pretty much everywhere else it's possible to do it directly via

<a href={qrImage} download="filename.png">
    <img src={qrImage} alt="qr code" />
</a>

so user just press image and download it. Turned on on iOS13 now second option works while first one doesn't anymore.

sçuçu · Accepted Answer · 2019-10-14 19:41:58Z

7

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

edited Oct 14, 2019 at 19:41

answered Oct 8, 2019 at 14:52

sçuçu

3,0902 gold badges37 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

lebed2045 Over a year ago

would the command document.createElement("a") pollute the DOM? especially if it's called many times. Is there a way to do pure function?

sçuçu Over a year ago

Probably not because it is not appended anywhere. If appended I would remove it as well.

sçuçu Over a year ago

Also it is possible to create a DocumentFragment and work inside it, but I am not sure I would need to check the DOM API if I would further work on that.

sçuçu Over a year ago

A bit more extreme approach for not even creating a test element could be that defining the functions with an element parameter and inside make the test with that element itself, preferably without mutating it, then decide whether to make the element visible or not, or render, remove from DOM and attach the aleternative.

Greg Perham Over a year ago

These kinds of answers are unhelpful when confronting bugs in particular browser versions (ahem, Mobile Safari). Certain CSS animations are buggy in iOS 12, but fixed in iOS 13. No way to use feature detection for that.

|

Mirzohid Akbarov · Accepted Answer · 2019-08-22 07:10:10Z

2

See this Link .

$(document).ready(function() {
    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)];
        }
    }

    ver = iOSversion();

    if (ver[0] >= 13) {
        alert('This is running iOS '+ver);
    }
});

answered Aug 22, 2019 at 7:10

Mirzohid Akbarov

1,2401 gold badge11 silver badges19 bronze badges

1 Comment

Justin Putney Over a year ago

navigator.platform for iOS 13 is "MacIntel" for all devices, so this code would fail to detect iOS 13.

Madusanka · Accepted Answer · 2019-09-03 06:10:10Z

1

You can detect iOS 13 on iPhone but in iPad OS 13 navigator.platform comes as MacIntel. So it is not possible to get iPad identified using below code, but it works perfectly on iPhone.

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

When user asks for mobile website using the browser navigator.platform returns as iPad and works perfectly.

answered Sep 3, 2019 at 6:10

Madusanka

3,0305 gold badges32 silver badges42 bronze badges

1 Comment

Madusanka Over a year ago

Check my other question for iPad OS 13 detection (How to detect iPad and iPad OS version in iOS 13 and Up? - stackoverflow.com/questions/57765958/… )

Collectives™ on Stack Overflow

How to detect iOS 13 on JavaScript?

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related