如何在 JavaScript 上检测 iOS 13？

Posted 2023-03-14

【中文标题】如何在 JavaScript 上检测 iOS 13？

【英文标题】：How to detect iOS 13 on JavaScript?

【发布时间】：2019-08-21 22:33:53

【问题描述】：

我用这个函数来检测ios

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

有没有办法让它检测到iOS13+？谢谢

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

<img src=qrImage  />

但是在 android/PC 和几乎其他任何地方都可以直接通过

<a href=qrImage download="filename.png">
    <img src=qrImage  />
</a>

所以用户只需按图像并下载它。开启 iOS13 现在第二个选项有效，而第一个不再有效。

【参考方案1】：

我想建议您不要从用户代理检测操作系统或浏览器，因为它们比 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

【讨论】：

命令document.createElement("a")会污染DOM吗？特别是如果它被多次调用。有没有办法做纯函数？

可能不是因为它没有附加到任何地方。如果附加，我也会将其删除。

还可以创建 DocumentFragment 并在其中工作，但我不确定是否需要检查 DOM API 是否需要进一步处理。

甚至不创建测试元素的更极端的方法可能是使用元素参数定义函数并在内部使用该元素本身进行测试，最好不改变它，然后决定是否元素可见与否，或渲染，从 DOM 中移除并附加替代项。

在遇到特定浏览器版本（嗯，Mobile Safari）中的错误时，这些类型的答案是没有帮助的。某些 CSS 动画在 iOS 12 中存在错误，但在 iOS 13 中已修复。无法为此使用特征检测。

【参考方案2】：

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

【讨论】：

navigator.platform for iOS 13 对于所有设备都是“MacIntel”，因此此代码将无法检测到 iOS 13。

【参考方案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 并完美运行。

【讨论】：

检查我关于 iPad OS 13 检测的其他问题（如何在 iOS 13 及更高版本中检测 iPad 和 iPad OS 版本？-***.com/questions/57765958/…）