如何在JavaScript中检测iOS 13？

Question

我使用这个函数来检测 iOS

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

有没有办法使其检测到iOS13+？谢谢。

为什么需要它？通常，iOS Safari无法下载文件，因此要使图像可下载，我应该将其呈现为

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

然而在 Android/PC 以及几乎任何其他地方，可以直接通过此方式进行。

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

所以用户只需点击图像即可下载。在iOS13中，现在启用了第二个选项，而第一个选项不再起作用。

- lebed2045

Answer 1

我建议您不要从用户代理中检测操作系统或浏览器，因为它们比为此提供的API更容易发生变化，直到可靠稳定的标准API出现。我不知道第二部分何时会出现。

然而，如果适用于您的情况，我可以建议您改为检测功能。

您可以检查锚HTML元素是否支持download属性： "document.createElement("a")中的"download" // 支持浏览器中为true，否则为false 这样，您就可以根据每种情况的输出来显示相应的HTML标记。类似以下内容可能会有所帮助：

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

例如，我使用以下代码来检测我是否在支持iOS上的AR快速查看的浏览器中：

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

你还可以使用下面记录的技巧: http://diveinto.html5doctor.com/detect.html#techniques

- sçuçu

---

执行 document.createElement("a") 命令会污染 DOM 吗？特别是当它被多次调用时。有没有一种方法可以实现纯函数？ - lebed2045

可能不会，因为它没有被附加在任何地方。如果被附加了，我也会将其删除。 - sçuçu

同时，也可以创建一个 DocumentFragment 并在其中进行操作，但我不确定是否需要检查 DOM API，如果我将进一步处理它。 - sçuçu

一个更加极端的方法是，甚至不创建测试元素，而是定义带有元素参数的函数，并在内部使用该元素本身进行测试，最好不要改变它，然后决定是否使元素可见或渲染，从DOM中删除并附加替代方案。 - sçuçu

当面对特定浏览器版本（咳咳，移动Safari）中的错误时，这些回答是无益的。某些CSS动画在iOS 12中存在缺陷，但在iOS 13中已经修复。无法使用功能检测来解决这个问题。 - Greg Perham

我的想法是进行特征检测，而不是任何类型的错误检测。程序员期望功能没有漏洞。它是否由功能供应商正确实现并不重要。以前在主要版本中正确实现的功能可能会后来出现漏洞。如果开发人员想要检测的是功能而不是版本，则仍然建议依赖于特征检测。例如，如果想要在平台的特定版本中显示某个东西，比如告诉他们升级等，则需要使用版本检测。 - sçuçu

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

- Mirzohid Akbarov

---

iOS 13所有设备的 navigator.platform 都是 "MacIntel"，因此这段代码无法检测到 iOS 13。 - Justin Putney

Answer 3

你可以在iPhone上检测iOS 13，但在iPad OS 13中，navigator.platform会显示为MacIntel。因此，无法使用以下代码识别iPad，但在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)];
}

当用户使用浏览器请求移动网站时，navigator.platform 返回 iPad，可以完美地使用。

- Madusanka

---

请查看我的另一个问题，了解如何在iOS 13及以上版本中检测iPad和iPad OS版本：https://dev59.com/ulMH5IYBdhLWcg3w30wJ - Madusanka