如何在 iOS 13 及更高版本中检测 iPad 和 iPad OS 版本？

Question

我可以在 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)];
            return version;
    }

当我们在 iPad 上使用浏览器请求移动网站时，navigator.platform 返回为 iPad 并完美运行。

谁能建议一种方法来使用 Javascript 识别 在 iOS 13 及更高版本上运行的 iPad？

Answer 1

我确实稍微扩展了实现，以便在 iPad OS 和 Mac OS Catalina 上使用更多默认浏览器功能。 根据我在各种 iPad 和所有后期 iOS 设备上的测试，这运行良好。

var isIPadOs = window.AuthenticatorAssertionResponse === undefined
        && window.AuthenticatorAttestationResponse === undefined
        && window.AuthenticatorResponse === undefined
        && window.Credential === undefined
        && window.CredentialsContainer === undefined
        && window.DeviceMotionEvent !== undefined
        && window.DeviceOrientationEvent !== undefined
        && navigator.maxTouchPoints === 5
        && navigator.plugins.length === 0
        && navigator.platform !== "iPhone";

要点：https://gist.github.com/braandl/f7965f62a5fecc379476d2c055838e36

Answer 2

TL;DR

const iPad = !!(navigator.userAgent.match(/(iPad)/)
  || (navigator.platform === "MacIntel" && typeof navigator.standalone !== "undefined"))

我们可以使用navigator.standalone 参数。它是非标准的，目前仅在 iOS Safari 上使用：

Navigator.standalone

返回一个布尔值，指示浏览器是否在独立模式下运行。仅适用于 Apple 的 iOS Safari。

当与navigator.platform === "MacIntel" 结合使用时，iPad 是唯一定义此属性的设备，因此typeof navigator.standalone !== "undefined" 会过滤掉运行 Safari（无论是否触摸屏）的 Mac。

我设置了一个 CodeSandbox 并在 Browserstack 上手动测试，似乎按预期工作：https://bc89h.csb.app/

版本检测（仅限 iOS）

我没有对此进行过广泛的测试，但应该给其他人一个很好的起点：

const version = navigator.userAgent.match(/Version\/(\d+)\.(\d+)\.?(\d+)?/);
const major = version && version[1] ? version[1] : "";
const minor = version && version[2] ? version[2] : "";
const patch = version && version[3] ? version[3] : "";

以上内容将版本分解为主要、次要和补丁元素。这似乎适用于我对其进行快速测试的 iOS 12 和 13。上面的 SandBox 链接显示了输出。

Answer 3

这很简单——你不能。你只能使用这样的技巧

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

“移动”的第一个条件，模仿 Macintosh Safari 的 iPad 的第二个条件。 它对我来说很可靠，但谁知道将来会发生什么变化。 如果有带触摸屏的 Mac，这不仅会检测处于桌面模式的 iPad，还会检测到普通 Mac。

另一种方法是功能检测 - 您可以，但可能不应该依赖浏览器功能支持。例如，Mac 上的 Safari 不支持日期选择器，但移动端支持。

无论如何，我建议您尽量不要依赖平台检测（无论如何将来都会被破坏）并使用功能检测（但不是针对不同平台）作为 Modernizr - 如果您想使用日期选择器，您可以检查如果可用，如果不可用，请改用 HTML 解决方案。不要仅仅因为用户使用其他浏览器而将其锁定。您可以通知他们，但让他们选择隐藏通知并使用您的网站。

作为用户，我讨厌有人告诉我去使用其他浏览器

请记住 - 平台检测表明代码味道不好，因为所有这些都是 hack。

Answer 4

这有点骇人听闻，而且未来肯定不是很安全，但现在我们正在使用以下方法，它似乎可以解决问题。

第一个块只是嗅探旧 iPad 的用户代理，'OR' 之后的第二个块是检查平台是否为 Macintosh 并具有接触点。在撰写本文时，还没有适用于 Mac 的官方触摸屏，因此在一段时间内应该是相当安全的。

if ((/\b(iPad)\b/.test(navigator.userAgent)
    && /WebKit/.test(navigator.userAgent)
    && !window.MSStream)
    || (navigator.platform === 'MacIntel'
    && navigator.maxTouchPoints
    && navigator.maxTouchPoints === 5)
  ) {
        return true;
    }

Answer 5

你可以使用 WURFL.js，如果你只是想知道正在使用什么设备，它是免费的：https://web.wurfl.io/#wurfl-js

完全披露，我是 WURFL 和 ImageEngine 背后公司的首席运营官，但我也是 an open-source developer :)

WURFL.js 可以告诉您正在使用什么操作系统以及它是 iPhone 还是 iPad。

要使用它，只需将其添加到页面头部：

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

然后就可以在javascript中使用设备信息了：

console.log(WURFL.complete_device_name);

注意：使用paid version，您可以获得更准确的结果（例如：Apple iPhone XS Max、Apple iPad Pro 11）以及许多其他设备特征。

如果您不需要设备信息来进行初始绘制，您也可以异步运行它，这样它就不会阻塞渲染。贴在body尾部，使用async或defer：

<script type="text/javascript">
window.addEventListener('WurflJSDetectionComplete', () => {
   console.log(`Device: ${WURFL.complete_device_name}`);
});
</script>
<script type="text/javascript" src="//wurfl.io/wurfl.js" async></script>

当您使用它时，不妨使用此改进的设备信息来增强 Google Analytics：https://www.scientiamobile.com/wurfljs-google-analytics-iphone/

请注意，与其他答案不同，此答案不需要开发人员进行持续维护。

Answer 6

我能够通过检查 navigator.maxTouchPoints 和 navigator.platform 来检测 iPad。它并不完美（如下面的 cmets 所述），但它是迄今为止我遇到的最佳解决方案，所以我想分享一下。

const iPad = (userAgent.match(/(iPad)/) /* iOS pre 13 */ || 
  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) /* iPad OS 13 */);