如何使用 JavaScript 检测移动浏览器

移动检测一直是应用程序开发的关键方面。 它既适用于应用程序，也适用于软件和网站。 有无数理由检查移动浏览器代理。 最重要的是，能够呈现独特的用户体验。

仅 UAParser.js 库就获得了数百万每周的软件包下载量。 而且，在大多数情况下，如果您从头开始构建某些东西就足够了。 但是，用 JavaScript 检测移动浏览器的其他方法呢？

有时您可能只需要一个简单的解决方案，无需任何库即可完成这项工作。 在本文中，我将为您介绍一些用于检测移动用户的 JavaScript 技术。 让我知道我是否错过了任何东西！

navigator.userAgent

浏览器检测的圣杯是 navigator.UserAgent 属性。

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

当然，这是一种非常原始的方法。 它很容易被操纵，因为 User-Agent 属性可以被欺骗。 但是，因为它可以完成这项工作，您仍然可以在各种项目中使用它。 例如登陆页面或自定义重定向到移动版本。

如何使用navigator.userAgent检测浏览器类型并根据具体浏览器显示内容？

好的，因此，可能存在一个独特的用例，您希望检测特定浏览器，例如 Chrome 和 Firefox（或者在本例中为 Android 和 iPhone），然后使用该数据显示特定内容。 这种方法通常用于为特定浏览器提供/更改下载链接。

在这种情况下，您可以使用以下功能。

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

您可以注释掉您不想检查的浏览器的各种else if语句，同样，您可以添加您确实想检查的其他浏览器。

触摸事件

检测移动用户的一种方法是检查设备是否具有触摸屏。

使用 GlobalEventHandlers.ontouchstart 属性，您可以进行简单检查以了解用户如何与您的应用程序交互。 如果交互来自触摸屏，则您可以返回应用程序或页面的移动版本。

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Surface 等触屏设备不具备此属性。 因此，来自基于桌面的触摸设备的用户仍将看到您页面的桌面版本。

Window.matchMedia()

Window.matchMedia() 是使用 JavaScript 检测移动用户的最佳属性之一。 之所以如此，是因为它可以让您直接与 CSS 交互。

在很多情况下，媒体查询更胜一筹，因为它们具有内置的移动检测工具。 例如，您可以调用来检查“pointer:coarse”是否为真。

此特定语句验证设备的指针是精细还是粗糙。

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

或者，该设备可能同时具有细指针和粗指针。 对于这个用例，我们可以检查是否有任何指针是粗糙的。

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

请记住，这只验证查询为真或假。 检查移动设备的一种更精细的方法是直接使用媒体查询。

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

此查询将直接检查设备的最大宽度并断言它是否符合条件。 同样，要正确获取所有设备，这是一项相当多的工作。 因此，使用已定义所有设备类型的预构建库会更容易。

在某些情况下有用

多年来，出现了许多用于检测设备类型的 JavaScript 属性。 其中很大一部分已被弃用，但其他大多数已集成到库中。 这也恰好是进行适当的移动检测的最佳方法。

最后但同样重要的是，大多数现代框架已经将移动检测作为框架本身的一部分。 如果您不想做所有的跑腿工作，那么值得研究一下。

用于检测移动设备的库

在本节中，我将列出用于检测移动设备的最流行的 JavaScript 库。 我再次强调，这些是 JavaScript 特有的。 请参阅文档以在您的应用中正确实施。

UAParser.js

就完整的库而言，UAParser 是最好的。 仅在 npm 上每周的下载量就超过 1000 万次——UAParser 是检测移动设备的实际解决方案。 顾名思义，该库通过解析用户代理字符串来工作。

但是，它如此受欢迎的原因是您可以解析数百种设备变体。 而且，所有这些都有很好的记录。 您可以从实际的设备供应商转向更复杂的检测模式，例如 CPU 架构。

移动检测.js

这是用于 PHP 的 Mobile Detect 库的一个相当简单的端口，由 Heinrich Goebl 提供给社区。 库本身使用 User-Agent 进行检测，因此正如我们之前讨论的那样——这不是最佳选择。

尽管如此，当涉及到实用的 HTML 模板或投资组合项目时，它应该可以胜任。

isMobile

在这里，我们对 Kai Mallea 的 User-Agent Navigator 属性有另一种看法。 虽然仍然是一个简单的解决方案，但我喜欢 isMobile 提供了多种规格。 例如，您可以测试任何移动设备或特定设备，如手机或平板电脑。

反应设备检测

你是 React.js 开发者吗？

那么这个来自 Michael Laktionov 的图书馆是给你的。 它可以按您的预期工作——首先库检测设备类型，然后根据该类型呈现视图。 与组件集成完美结合，并可通过 API 调用进一步定制。

一个有趣的事实是这个库包含的选择器的数量。 它涵盖了智能电视、可穿戴设备、各种 iPhone 设备等设备。 这为您在为特定设备构建应用程序时提供了广泛的设计选择。