ios - 如何在 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

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

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

您可以检查anchor 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.
  }
});

例如，我使用以下方法来检测我是否使用 AR Quick Look 支持 iOS 上的浏览​​器:

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

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