logo标签列表

如何使用JavaScript将iPad Pro检测为iPad？

javascriptiosios13ipados
30

我们可以使用如下Javascript代码检测到iPad设备：

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

那个方案在检测iPad设备上完美运作，但是当我们从一台上检查时，并没有检测到它是一台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，但似乎 navigator 不像旧版 iPad 那样返回 iPad。
有什么办法可以解决这个问题吗？
1
这个回答解决了你的问题吗？在网页上区分iPadOS和macOS。 - igorsantos07
9个回答
41

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);
}
4
navigator.platform现在已经被弃用。 - Kevin Oswaldo
27
我猜iPad Pro已经升级到了iPadOS 13 Beta。由于苹果声称iPadOS支持Safari桌面级浏览，因此移动版Safari也会模仿macOS的行为和用户代理。
所以，简短的答案是不可能。
但是，你可以尝试从这个问题的答案中找到解决方法。
3
我认为这是最合理的做法。在检测到MacIntel时，我们将检查它是否是触摸设备，如果是，则知道它是iPad。这种方式目前可行，但未来可能不够安全（当苹果电脑开始变成触摸屏时），但目前这种方法能够正常工作而且不依赖尺寸。感谢提供链接 :) - Wonka
16

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

(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0) || navigator.platform === 'iPad'
2
在本文发布时，可以检测到iPad上的Safari、Firefox和Chrome。 - Jeff Clayton
1
这是我找到的唯一适用于我的iPad第六代的解决方案。 由于平台已被弃用，并且navigator.userAgentData.platform在每个浏览器上都不受支持，我们应该采用不同的方法（参见：https://erikmartinjordan.com/navigator-platform-deprecated-alternative）。为了测试目的，可以使用https://jsfiddle.net/riethmue/3w49t01d/16/（在我的iPad第六代上有效）。 - riethmue
8

您可以使用正则表达式来解决这个问题。

var isIPadPro = /Macintosh/.test(navigator.userAgent) && 'ontouchend' in document;
检测iPad上的Safari和Firefox（如果读者不知道，在iPad上，Firefox是一个经过重新品牌的Safari版本），但目前还不能检测iPad上的Chrome。在UserAgent中添加对CriOS的检查，并与Macintosh一起使用此方法以包括Chrome。 - Jeff Clayton
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/
这是一个黑客攻击吗？ - Mạnh Quyết Nguyễn
3
分屏使用怎么样？ - Cezary Daniel Nowak
此外，当使用舞台管理器时，这将不再适用于 iPadOS 16。 - Michal M
2
检测“iPad Pro 10.5”设备最简单的方法是通过检查其屏幕大小，即“window.screen.height x window.screen.width = 1112 x 834”。然而，我想知道你为什么需要检测设备型号。如果你想检测移动浏览器，请参考这个问题：检测移动浏览器。
1

这是可能的。

您可以使用此功能。 这也将检查具有触摸设备（iPad 13）的 Mac。

<script type="text/javascript">

    if(iOS()){
        alert('iOS');
    }

    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)
        }
</script>
1
你应该能够使用屏幕尺寸来区分它们。虽然你需要找到每个想要检测的iPad Pro的实际值。
window.screen.height
window.screen.width
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接