如何在JavaScript上检测iOS 13? [英] How to detect iOS 13 on JavaScript?

问题描述

我使用此功能来检测iOS

I use this function to detect iOS

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

有什么方法可以使其检测到iOS13 +?谢谢

is there any way to make it detected iOS13+? thanks

我为什么需要它?通常，iOS Safari无法下载文件，因此要下载图像，我应该将其渲染为

Why do I need it? usually, iOS safari can't download files therefore to make image downloadable I should render it as

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

不过，在Android/PC上以及几乎所有其他地方，都可以直接通过

however on Android/PC and pretty much everywhere else it's possible to do it directly via

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

因此用户只需按一下图像并下载即可.现在，在iOS13上启用后，第二个选项可以使用，而第一个选项不再可用.

so user just press image and download it. Turned on on iOS13 now second option works while first one doesn't anymore.

推荐答案

我建议您不要从用户代理中检测操作系统或浏览器，因为与之相比，它们比API容易改变的范围更广，使用可靠的稳定标准API土地.我不知道第二部分何时会发生.

I would like to advice you against detecting operating system or browser from user agent, since they are susceptible to change more than an API for that does, till a reliable stable standard API lands. I have no idea about when this second part will happen.

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

However, I can suggest to detect feature instead if in this case it is applicable to you.

您可以检查 anchor html元素是否支持 download 属性:

You can check if the anchor html element supports download attribute:

"download" in document.createElement("a")//在支持浏览器中为true，否则为false

这样，您就可以根据每种情况的输出来显示相应的html标记.这样的事情可能会有所帮助:

That way you can display the appropriate html markup depending on the output for each case. Something like that may help:

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 上的快速浏览支持浏览器上:

For example, I use following to detect if I am on an ar quick look supporting browser on iOS:

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

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

You can also use techniques documented below: http://diveinto.html5doctor.com/detect.html#techniques

这篇关于如何在JavaScript上检测iOS 13?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！