如何在 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 更容易改变，直到可靠稳定的标准 API 登陆。我不知道第二部分什么时候会发生。

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

您可以检查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 快速查看支持浏览器：

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

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