web-dev-qa-db-fra.com

Comment détecter iOS 13 sur JavaScript?

J'utilise cette fonction pour détecter iOS

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

existe-t-il un moyen de le faire détecter iOS13 +? Merci

Pourquoi en ai-je besoin? Habituellement, iOS Safari ne peut pas télécharger de fichiers donc pour rendre l'image téléchargeable, je dois la rendre comme

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

cependant sur Android/PC et à peu près partout ailleurs, il est possible de le faire directement via

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

l'utilisateur doit donc appuyer sur l'image et la télécharger. Activée sur iOS13, la deuxième option fonctionne maintenant, tandis que la première ne fonctionne plus.

iosiphonesafariuser-agentios13
2
lebed2045

Je voudrais vous déconseiller de détecter le système d'exploitation ou le navigateur de l'agent utilisateur, car ils sont susceptibles de changer plus qu'une API pour cela, jusqu'à ce qu'une API standard stable et fiable arrive . Je ne sais pas quand cette deuxième partie aura lieu.

Cependant, je peux suggérer de détecter la fonctionnalité à la place si dans ce cas elle s'applique à vous.

Vous pouvez vérifier si anchor html element Prend en charge l'attribut download:

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

De cette façon, vous pouvez display le balisage html approprié en fonction de la sortie pour chaque cas. Quelque chose comme ça peut aider:

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

Par exemple, j'utilise ce qui suit pour détecter si je suis sur un ar aperçu rapide supportant le navigateur sur iOS:

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

Vous pouvez également utiliser les techniques décrites ci-dessous: http://diveinto.html5doctor.com/detect.html#techniques

2
Selçuk

Vous pouvez détecter iOS 13 sur iPhone mais sur iPad OS 13 navigator.platform vient sous MacIntel. Il n'est donc pas possible d'identifier iPad à l'aide du code ci-dessous, mais cela fonctionne parfaitement sur 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)];
}

Lorsque l'utilisateur demande un site Web mobile à l'aide du navigateur navigator.platform revient comme iPad et fonctionne parfaitement.

1
MaDu_LK

Voir ceci Lien .

$(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);
    }
});
0
Mirzohid Akbarov