JavaScript 检测移动浏览器

1. 通过检测使用的设备来检测移动浏览器
2. 通过触摸屏检测移动浏览器

JavaScript 被广泛用于开发基于 Web 的应用程序。大多数这些应用程序还与移动浏览器兼容。

本教程将演示可用于使用 JavaScript 检测移动浏览器的各种方法。

通过检测使用的设备来检测移动浏览器

使用 JavaScript 识别移动浏览器的最简单直接的方法是浏览当今市场上可用的各种设备的列表，并检查 useragent 是否对我们可用的列表中的任何一个设备进行了补充。

以下是我们将使用的函数的代码片段 -

function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

如果分辨率小于或等于 800x600，我们可以假设目标设备是移动设备，从而进一步缩小对移动设备的搜索范围，即使当今可用的大多数移动设备都提供更高的分辨率。

因此，建议同时使用这两种方法，检测使用的设备和检测设备的分辨率以获得最高效率，以避免误报。

以下是检测用户操作的设备分辨率的代码。

function detectMob() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
}

通过触摸屏检测移动浏览器

另一种检查用户操作的目标设备是否为移动设备的方法是检查用户是否正在使用触摸操作设备。由于当今市场上所有的手机都是触摸操作的，因此这种方法可靠且高效。

但是，由于平板电脑也是触摸操作的，因此存在一个限制，即该方法还将包括平板电脑。

我们可以使用以下代码通过查看设备是否使用触摸屏操作来检测移动浏览器。

var touchDevice = ('ontouchstart' in document.documentElement);

此功能可以进一步扩展到不仅包括手机和平板电脑，还包括支持触摸屏的台式机和笔记本电脑。

var touchDevice = ('ontouchstart' in document.documentElement);