在我的案例中，用户代理不够好，因为Ipad中的用户代理与Mac OS中的用户代理相同，因此我不得不做一个讨厌的把戏:

var mql = window.matchMedia("(orientation: landscape)");

/**
 * If we are in landscape but the height is bigger than width
 */
if(mql.matches && window.screen.height > window.screen.width) {
    // IOS
} else {
    // Mac OS
}

可能值得回答的是，运行iOS 13的ipad将有导航器。平台设置为MacIntel，这意味着你需要找到另一种方法来检测iPadOS设备。

iOS设备上的用户代理会显示iPhone或iPad。我只是根据这些关键词进行筛选。

iOS检测

在iOS 13 iPad中，用户代理和平台字符串都被改变了，iPad和MacOS之间的区别似乎是可能的，所以下面的所有回答都需要考虑到这一点。

这可能是覆盖iOS 13的最短替代方案:

function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

iOS要么为真，要么为假

更糟糕的选择:用户代理嗅探

用户代理嗅探更加危险，经常出现问题。

在iPad iOS 13上，用户代理与MacOS 13计算机上的用户代理相同，但如果你忽略iPad，这可能仍然可以工作一段时间:

var iOS = !window.MSStream && /iPad|iPhone|iPod/.test(navigator.userAgent); // fails on iPad iOS 13

!窗口。MSStream是为了不错误地检测IE11，请看这里和这里。

注意:都是导航器。userAgent和navigator。平台可以被用户或浏览器扩展伪造。

改变userAgent或平台的浏览器扩展存在，因为网站使用了过于繁重的检测，并且经常禁用一些功能，即使用户的浏览器本来可以使用这些功能。

为了减少与用户的冲突，建议针对每种情况专门检测您的网站需要的确切功能。然后，当用户得到一个具有所需功能的浏览器时，它就已经可以工作了，而无需额外的代码更改。

检测iOS版本

检测iOS版本的最常见方法是从User Agent字符串中解析它。但也有特征检测推断*;

我们知道，历史API是在iOS4中引入的，matchMedia API是在iOS5中引入的，webAudio API是在iOS6中引入的，WebSpeech API是在iOS7中引入的，等等。

注意:以下代码是不可靠的，如果这些HTML5功能中的任何一个在更新的iOS版本中被弃用，就会中断。我警告过你!

function iOSversion() {

  if (iOS) { // <-- Use the one here above
    if (window.indexedDB) { return 'iOS 8 and up'; }
    if (window.SpeechSynthesisUtterance) { return 'iOS 7'; }
    if (window.webkitAudioContext) { return 'iOS 6'; }
    if (window.matchMedia) { return 'iOS 5'; }
    if (window.history && 'pushState' in window.history) { return 'iOS 4'; }
    return 'iOS 3 or earlier';
  }

  return 'Not an iOS device';
}

因为导航器。平台已弃用，最好不再使用，我想添加一个其他解决方案。

你可以通过检查navigator.vendor来过滤MacOS系统。 当结果是苹果电脑公司，你知道它是MacOS。

如果你还在尝试检查是否是iOS，我建议你使用以下方法:

创建一个名为helper的文件夹 创建一个名为platform的文件。Ts或platform.js 导出函数isIOS:

export const isIOS = () => {
    let platform = navigator?.userAgent || navigator?.platform || 'unknown'

    return /iPhone|iPod|iPad/.test(platform)
}

如果是iPhone或iPod或Ipad，结果为真，否则为假。

你可能会问，为什么我需要检查导航器。userAgent || navigator。平台，原因很简单，第二个选项曾经是默认选项，但现在它已弃用，一些浏览器将在未来停止支持它，第一个选项更可靠。

你可以在这里查看我上面提到的反对意见:

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform: ~:文本3 =弃用% % 20这% % 20 20特性是% 20不,% 20保持% 20 % 20兼容性% 20目的。

记录userAgentData、userAgent和平台。

使用下面的函数，我收到了这些日志:

    console.log({
        userAgentData: navigator?.userAgentData?.platform,
        userAgent: navigator?.userAgent,
        platform: navigator?.platform,
    })

    {
        "userAgentData": "",
        "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
        "platform": "MacIntel"
    }

我在自己的Macbook电脑上测试了它，它在不同的浏览器和操作系统上都能运行。你可以看到navigator?。useragentdata ?。平台根本不起作用。

我也没有收到任何与我的typescript相关的错误，即使我使用React调用这个函数。

奖金、isAndroid

如果你想知道如何检查是否是Android平台，我建议你不要遵循与isIOS相反的想法:

const isAndroid = !isIOS();

原因很简单，因为桌面将被视为Android平台，所以它将无法工作。 要解决这个问题，你只需要做以下检查:

export const isAndroid = () => {
    const ua = navigator.userAgent.toLowerCase() + navigator?.platform.toLowerCase();
    const isAndroid = ua.indexOf("android") > -1;

    return isAndroid;
}

我们检查导航器的原因。userAgent + navigator?平台支持新旧浏览器。