如何使用 JavaScript 检测移动设备

许多操作在桌面、平板和移动设备上都能运行。我们可以检测到在移动设备上运行的操作。我们可以使用各种方法来检测移动设备，包括 "window.navigator.userAgent" 和 "window.orientation" 方法。

方法 1：使用 navigator.userAgent 属性

我们将使用 `window.navigator` 对象，它包含了关于浏览器的一切信息，来使用 JavaScript 识别移动设备。我们将利用 `userAgent` 字段来识别移动设备，该字段用于返回浏览器提供给服务器的用户代理头。

浏览器名称、版本和平台等所有关于移动设备的信息，都可以通过使用这个 函数 来获取，这些是我们从该属性中得到的值。

语法

检测移动设备的 JavaScript 语法如下：

步骤

以下步骤概述了如何使用 JavaScript 来识别移动设备：

1. 创建一个按钮，并将其连接到名为 `function` 的函数。
2. 现在我们将在函数中构建一个 "if 循环"。
3. 使用 `navigator`，我们将在 "if 循环" 中为任何可以使用 `userAgent` 参数检测到的移动设备编写一些条件。
4. 我们已经编写了与各种移动设备兼容的条件，包括 Android、webOS、iPad、iPhone、iPod、BlackBerry 和 Windows Phone。
5. 如果识别出移动设备，则在验证所有条件后，结果将为 true。
6. 如果未识别出移动设备，则 `else` 循环在 'a' 变量中返回 false。
7. 最后，在响应 变量 中打印 'a' 的值，该变量连接到 id 为 result 的段落标签，以在屏幕上显示 true 或 false 的值。

示例

以下示例显示了设备是否为移动设备。该设备显示了用于检测移动设备的 布尔值。

输出

输出显示了用于检测移动设备的布尔值。

说明

为了从上述代码中获得 "true" 的输出，我们需要使用 Chrome 开发者工具执行代码，并在其中选择手机选项。您可以使用上面的代码来检测手机的存在，通过进入开发者工具的手机模式并从可用设备列表中选择任何手机作为模拟器。

执行代码后，将打开一个名为 "Check" 的窗口。单击此按钮可查看是否可以检测到手机。如果代码在移动设备上执行，则结果为 true，否则为 false。

方法 2：使用 window.orientation 方法

此方法中的用户代理 字符串 很容易被欺骗。因此，这不是使用 JavaScript 识别移动设备的最佳方法。因此，我们还可以通过查看设备视口的 方向 来使用 JavaScript 的 `window.orientation` 方法来识别移动设备。

它以度为单位提供值，例如 -90、0、90 和 180。这些变量中的每一个都代表一个不同的视角。如果视口值大于 0，则认为该设备是移动设备；否则，它不是移动手机。

注意：此功能不再受支持且已弃用。

步骤

以下是使用 JavaScript 检测移动设备的步骤：

1. 创建一个按钮，并将其与 "myfunction" 函数关联。
2. 现在我们将在 script 标签内定义该函数。
3. 通过创建一个名为 `answer` 的变量，将使用 `window.orientation` 方法来确定方向值是否大于 -1。
4. 下一行调用 `alert` 方法，如果 `answer` 变量的值为 true，则打印 "It is a mobile phone"。
5. 否则，值将显示 "It is not a mobile phone"。

示例

以下示例显示了正在使用的设备是否为移动设备。该设备显示了用于检测移动设备的数据信息和警报框。

输出

输出显示了用于检测移动设备的值。

方法 3：检测网站是否在移动设备上打开

使用 Javascript，我们可以检测一个网站是否在移动设备上打开。我们可以使用 "navigator.userAgent" 方法来检测一个网站是否在移动设备上运行。我们可以使用此方法来检测移动设备、平板电脑和台式机。

语法

以下 JavaScript 语法用于检测网站的移动设备。

示例

以下示例显示了正在使用的设备是否为移动设备。该设备显示了用于检测移动设备的布尔值。

示例 1

以下示例显示了网站是否在移动设备上运行。该设备显示了用于检测移动设备的布尔值。

输出

输出显示了用于检测移动设备的布尔值。

示例 2

以下示例显示了网站是否在移动设备上运行。

输出

输出显示了用于检测移动设备的布尔值。

方法 4：使用 "navigator.vendor" 方法

navigator.vendor 函数可以检测可能的移动设备。我们可以看到设备是否为移动设备。

示例

以下示例显示了网站是否在移动设备上运行。

输出

输出显示了用于检测移动设备的布尔值。