怎么用 Javascript 识别移动设备

移动设备的识别可以通过检测用户代理字符串、利用触摸事件的支持程度、屏幕尺寸和分辨率、设备特有的功能来实现。具体来说，用户代理字符串通常是首选的方法，因为它含有关于浏览器和操作系统的信息，我们可以通过分析这些信息来判断是否为移动设备。在JavaScript中，可以通过navigator.userAgent属性读取用户代理字符串，并利用正则表达式检测其中是否包含特定的移动设备标识符，如iPhone, Android等。这种方法简单且易于实现。

一、用户代理字符串(User-Agent)检测

用户代理字符串包含了浏览器和操作系统的诸多信息，而这些信息对于移动设备识别至关重要。

识别通用移动设备

首先，我们编写一个函数来检查navigator.userAgent属性，寻找常见的移动设备标识符。如下所示的代码演示了如何实现这一逻辑：

function isMobileDevice() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    // 使用正则表达式来检测用户代理字符串中是否含有移动设备特有的关键字
    return /iPhone|iPod|iPad|Android|BlackBerry|Opera Mini|IEMobile|WPDesktop/i.test(userAgent);
}
if (isMobileDevice()) {
    console.log("This is a mobile device.");
} else {
    console.log("This is not a mobile device.");
}

通过用户代理字符串检测是最快速的判别方式之一，但也不是完全可靠的，因为用户可以修改用户代理来伪造设备类型。

针对特定类型的设备检测

以下为特定设备的检测方法，可以进一步细化判断：

function detectDeviceType() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return 'iOS device';
    } else if (/android/i.test(userAgent)) {
        return 'Android device';
    } else {
        return 'Not a mobile device';
    }
}
var deviceType = detectDeviceType();
console.log(deviceType);

该方法将帮助我们更准确地识别设备类型，不过依旧无法100%保证准确性。

二、触摸事件支持检测

除了检测用户代理字符串之外，触控事件的支持往往是移动设备的一个显著特征。

检测触摸事件

触摸事件主要在移动设备上使用，可通过如下代码判断当前环境是否支持触摸事件：

function hasTouchSupport() {
    return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
}
if (hasTouchSupport()) {
    console.log("The device supports touch events.");
} else {
    console.log("The device does not support touch events.");
}

支持触摸事件可以作为判断是否是移动设备的一个辅助因素，但不完全可靠，因为部分现代的非移动设备（如某些笔记本电脑）也开始支持触摸操作。

三、屏幕尺寸和分辨率检测

屏幕尺寸和分辨率一般而言，移动设备比桌面设备有着更小的屏幕尺寸和分辨率，检测这些属性可以帮助我们判断设备类型。

根据屏幕宽度识别

你可以根据屏幕的物理尺寸或者设备独立像素判断一个设备是否是移动设备：

function isMobileByScreenWidth() {
    const mobileScreenWidthThreshold = 768; // 你可以根据需要设置这个阈值
    return window.innerWidth <= mobileScreenWidthThreshold;
}
if (isMobileByScreenWidth()) {
    console.log("The device is likely a mobile device.");
} else {
    console.log("The device is likely not a mobile device.");
}

屏幕宽度是一种简单的判断策略，但由于不同设备之间屏幕尺寸差异很大，这种方式有一定局限性。

分辨率的角度判断

利用设备的物理像素和DPR(Device Pixel Ratio)来判断设备类型：

function isMobileByResolution() {
    const devicePixelRatio = window.devicePixelRatio || 1;
    const screenWidth = screen.width * devicePixelRatio;
    // 当设备的物理像素宽度小于一个特定的值时认为它是移动设备
    return screenWidth < 1080;
}
if (isMobileByResolution()) {
    console.log("This device has a mobile resolution.");
} else {
    console.log("This device does not have a mobile resolution.");
}

根据分辨率判断也不是万无一失，因为市场上的移动设备和桌面设备种类繁多，它们的分辨率覆盖范围有重叠。

四、设备功能检测

移动设备通常具有某些特定的硬件功能，如加速度计和陀螺仪，可以通过检测这些功能来辅助识别。

加速度计和陀螺仪检测

检测设备是否支持重力感应和方向变化：

function hasMotionSensors() {
    return 'ondevicemotion' in window;
}
function hasOrientationSensor() {
    return 'DeviceOrientationEvent' in window;
}
if (hasMotionSensors()) {
    console.log("The device has a motion sensor.");
}
if (hasOrientationSensor()) {
    console.log("The device has an orientation sensor.");
}