如果你正在使用React，有一个很棒的库可以解决这类问题:React - agent。(使用ua-parser-js构建。)

https://github.com/medipass/react-ugent

可用的浏览器有:

Chrome, chromium, edge, firefox，即，lynx, safari, opera

可用的操作系统包括:

安卓，黑莓，铬操作系统，debian, ios, linux, MAC操作系统，ubuntu, unix, Windows

可选设备包括:

游戏机、电脑、手机、平板电脑、智能电视、可穿戴、嵌入式

易于使用:

<Ugent browser="safari" os="ios">
  <div>
    This text only shows on Safari on iOS.
  </div>
</Ugent>

如果你不使用React，你可以使用- ua-parser-js

https://github.com/faisalman/ua-parser-js

如果您正在使用Modernizr，您可以为它添加一个自定义测试。

决定使用哪种检测模式并不重要(userAgent, navigator。Vendor或navigator.platform)，您总是可以将其打包以便稍后使用。

//Add Modernizr test
Modernizr.addTest('isios', function() {
    return navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
});

//usage
if (Modernizr.isios) {
    //this adds ios class to body
    Modernizr.prefixed('ios');
} else {
    //this adds notios class to body
    Modernizr.prefixed('notios');
}

以上所有答案都不适用于所有版本的iOS(包括iOS 13)上的所有主要浏览器。下面是一个适用于所有iOS版本的Safari、Chrome和Firefox的解决方案:

var isIOS = (function () {
    var iosQuirkPresent = function () {
        var audio = new Audio();

        audio.volume = 0.5;
        return audio.volume === 1;   // volume cannot be changed from "1" on iOS 12 and below
    };

    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var isAppleDevice = navigator.userAgent.includes('Macintosh');
    var isTouchScreen = navigator.maxTouchPoints >= 1;   // true for iOS 13 (and hopefully beyond)

    return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));
})();

请注意，此代码片段的编写优先考虑的是可读性，而不是简洁性或性能。

解释:

If the user agent contains any of "iPod|iPhone|iPad" then clearly the device is iOS. Otherwise, continue... Any other user agent that does not contain "Macintosh" is not an Apple device and therefore cannot be iOS. Otherwise, it is an Apple device, so continue... If maxTouchPoints has a value of 1 or greater then the Apple device has a touch screen and therefore must be iOS since there are no Macs with touch screens (kudos to kikiwora for mentioning maxTouchPoints). Note that maxTouchPoints is undefined for iOS 12 and below, so we need a different solution for that scenario... iOS 12 and below has a quirk that does not exist in Mac OS. The quirk is that the volume property of an Audio element cannot be successfully set to any value other than 1. This is because Apple does not allow volume changes on the Audio element for iOS devices, but does for Mac OS. That quirk can be used as the final fallback method for distinguishing an iOS device from a Mac OS device.

在iOS 13之后，你应该像这样检测iOS设备，因为iPad将不会被旧的方式检测为iOS设备(由于新的“桌面”选项，默认启用):

let isIOS = /iPad|iPhone|iPod/.test(navigator.platform)
|| (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)

第一个条件适用于iOS < 13或禁用桌面模式的iPhone或iPad，第二个条件适用于默认配置的iPadOS 13，因为它将自己定位为Macintosh Intel，但实际上是唯一具有多点触摸的Macintosh。

与其说是一种破解，不如说是一种真正的解决方案，但对我来说很可靠

P.S.如前所述，你可能应该添加IE检查

let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream

如果你正在使用React，有一个很棒的库可以解决这类问题:React - agent。(使用ua-parser-js构建。)

https://github.com/medipass/react-ugent

可用的浏览器有:

Chrome, chromium, edge, firefox，即，lynx, safari, opera

可用的操作系统包括:

安卓，黑莓，铬操作系统，debian, ios, linux, MAC操作系统，ubuntu, unix, Windows

可选设备包括:

游戏机、电脑、手机、平板电脑、智能电视、可穿戴、嵌入式

易于使用:

<Ugent browser="safari" os="ios">
  <div>
    This text only shows on Safari on iOS.
  </div>
</Ugent>

如果你不使用React，你可以使用- ua-parser-js

https://github.com/faisalman/ua-parser-js

如果你还在尝试检查是否是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?平台支持新旧浏览器。