5

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.

3 Answers 3

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

6
  • would the command document.createElement("a") pollute the DOM? especially if it's called many times. Is there a way to do pure function?
    – lebed2045
    Oct 11, 2019 at 1:46
  • 1
    Probably not because it is not appended anywhere. If appended I would remove it as well.
    – sçuçu
    Oct 11, 2019 at 3:03
  • 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
    Mar 13, 2021 at 16:51
  • 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.
    – sçuçu
    Mar 13, 2021 at 16:56
  • 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. Aug 3, 2021 at 22:14
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);
    }
});
1
  • 5
    navigator.platform for iOS 13 is "MacIntel" for all devices, so this code would fail to detect iOS 13. Nov 6, 2019 at 18:19
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.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.