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

我可以通过检查navigator.maxTouchPoints和navigator.platform来使iPad检测正常工作。它并不完美（如下面的评论中所述），但这是到目前为止我遇到的最好的解决方案，所以我想分享。

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

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解决方案。不要仅仅因为用户使用其他浏览器而锁定用户。您可以通知他们，但可以选择隐藏通知并继续使用您的网站。

作为用户，当有人告诉我使用其他浏览器时，我有

请记住-平台检测表明代码很臭，因为所有这些都是黑客。

Answer 4

我确实扩大了实现范围，以利用iPad OS与Mac OS Catalina上更多的默认浏览器功能。根据我在各种iPad和所有较晚的iOS设备上进行的测试，效果很好。

let isIPadOs = function() {
return window.AuthenticatorAssertionResponse === undefined
        && window.AuthenticatorAttestationResponse === undefined
        && window.AuthenticatorResponse === undefined
        && window.Credential === undefined
        && window.CredentailsContainer === undefined
        && window.DeviceMotionEvent !== undefined
        && window.DeviceOrientationEvent !== undefined
        && navigator.maxTouchPoints === 5
        && navigator.plugins.length === 0
        && navigator.platform !== "iPhone";
}

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

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）以及许多其他设备特征。

如果您不需要初始绘画的设备信息，则也可以异步运行它，以免阻碍渲染。将其粘贴在正文的末尾并使用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

这有点骇人听闻，而且肯定不是很安全，但就目前而言，我们正在使用以下内容，而且似乎可以解决问题。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm1" action="comment1.php" method="post">
    <input type="submit" value="Submit Form1" />
</form>
<form id="myForm2" action="comment2.php" method="post">
    <input type="submit" value="Submit Form2" />
</form>
<form id="myForm3" action="comment3.php" method="post">
    <input type="submit" value="Submit Form3" />  
</form>
<form id="myForm4" action="comment4.php" method="post">
    <input type="submit" value="Submit Form4" />  
</form>

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

6 个答案:

版本检测（仅适用于iOS）