如何使用 javascript 将 iPad Pro 检测为 iPad？答案

【问题标题】：How to detect iPad Pro as iPad using javascript?如何使用 javascript 将 iPad Pro 检测为 iPad？
【发布时间】：2020-01-06 14:46:53
【问题描述】：

我们能够像这样使用 javascript 检测 iPad 设备：

function isDeviceiPad(){
    return navigator.platform.match(/iPad/i);
}

这在检测 iPad 设备方面非常有效，但是当我们从 iPad Pro (10.5 inch) 检查时，它没有检测到它是 iPad。

为了进一步调查，我们深入研究了navigator 对象，检查了platform 和userAgent，得到了以下结果：

navigator.platform = 'MacIntel';
navigator.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) 
 AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15)';

问题是返回 navigator.platform = 'MacIntel'（与 MacBook Pro 相同）而不是 iPad。我们需要一种方法来检测这是一台 iPad 而不是 MacBook Pro，但导航器似乎不像旧版 iPad 那样返回 iPad。

知道如何解决这个问题吗？

【问题讨论】：

标签： javascript ios ios13 ipados

【解决方案1】：

iPadPro 将浏览器的 navigator.platform 报告为“MacIntel”，但这与其他平台相同。

目前（2019 年）iPadPro 与其他平台的区别在于 iPadPro 支持触控。

这里有几个有用的方法。

function isIOS() {
  if (/iPad|iPhone|iPod/.test(navigator.platform)) {
    return true;
  } else {
    return navigator.maxTouchPoints &&
      navigator.maxTouchPoints > 2 &&
      /MacIntel/.test(navigator.platform);
  }
}

function isIpadOS() {
  return navigator.maxTouchPoints &&
    navigator.maxTouchPoints > 2 &&
    /MacIntel/.test(navigator.platform);
}

【讨论】：

【解决方案2】：

我猜 iPad Pro 升级到 iPadOS 13 Beta。由于 Apple 在 iPadOS 上声明了Desktop-Class Browsing with Safari，看来移动版 Safari 也模仿了 macOS 的行为和用户代理。

所以，简短的回答是不可能。

但是，您可以尝试从this question 的答案中尝试解决方法。

【讨论】：

我认为这是最有意义的。当检测到 MacIntel 时，我们会检查它是否是触控设备，如果是，我们就会知道它是 iPad。这目前有效，但未来可能不安全（当苹果电脑开始成为触摸屏时），但现在这可以按预期工作，而不依赖于尺寸。谢谢你的链接:)

【解决方案3】：

您可以为此使用正则表达式。

var isIPadPro = /Macintosh/.test(navigator.userAgent) && 'ontouchend' in document;

【讨论】：

【解决方案4】：

您可以使用屏幕尺寸来检查它，iPad pro 有 2 个不同的面。详细实现如下，根据您的用例进行修改

function isIpadPro() {
    var ratio = window.devicePixelRatio || 1;
    var screen = {
        width : window.screen.width * ratio,
        height : window.screen.height * ratio
    };
    return (screen.width === 2048 && screen.height === 2732) || (screen.width === 2732 && screen.height === 2048) || (screen.width === 1536 && screen.height === 2048) || (screen.width === 2048 && screen.height === 1536);
}

屏幕尺寸参考：http://screensiz.es/

【讨论】：

这是一个黑客？
分屏使用怎么样？

【解决方案5】：

目前，在 2020 年 10 月，我知道的唯一方法是：

(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0) || navigator.platform === 'iPad'

【讨论】：

【解决方案6】：

检测“iPad Pro 10.5”设备的最简单方法是检查其屏幕尺寸"window.screen.height x window.screen.width = 1112 x 834"

但是，我想知道您为什么需要检测设备型号。如果您想检测移动浏览器，请查看以下问题：Detecting Mobile Browser

【讨论】：

【解决方案7】：

您应该能够使用屏幕大小来区分它们。认为您需要找到要检测的每个 iPad Pro 的真正价值。

window.screen.height
window.screen.width

【讨论】：

【解决方案8】：

Capacitor 有一个有用的网络插件来获取设备信息 (https://capacitor.ionicframework.com/docs/apis/device#example)。它不区分 iPad Pro 和普通 iPad，但您可以将此插件的使用与建议的屏幕尺寸解决方案结合使用。

如果你想自己做，你可以看看这里的代码：https://github.com/ionic-team/capacitor/blob/master/core/src/web/device.ts

【讨论】：