如何在 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 上打开现在第二个选项有效，而第一个选项不再有效。

Answer 1

看到这个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);
    }
});

Answer 2

您可以在 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 returns 作为 iPad 的浏览器请求移动网站并且完美运行时。

Answer 3

我建议您不要从用户代理检测操作系统或浏览器，因为它们比 API 更容易发生变化，till a reliable stable standard API lands。我不知道第二部分什么时候发生。

但是，如果在这种情况下它适用于您，我可以建议 检测功能。

您可以查看anchor html element是否支持download属性：

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

这样您就可以 display 适当的 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 quick look 支持浏览器：

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

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

如何在 JavaScript 上检测 iOS 13？

How to detect iOS 13 on JavaScript?

ios

iphone

safari

user-agent

ios13