js判断是否是手机

通过解析 navigator.userAgent 属性返回的字符串，可以识别出浏览器的用户代理信息，其中包括设备类型、操作系统和浏览器版本等。虽然这种方法不够精确，因为用户代理字符串可以被伪造，但它仍然是一个广泛应用的快速判断手段。以下是一个简单的示例：

function isMobileDevice() {
    return /Mobi|Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent);
}

if (isMobileDevice()) {
    console.log("访问设备可能是手机");
} else {
    console.log("访问设备可能不是手机");
}
复制

这个函数通过正则表达式检查 navigator.userAgent 是否包含常见的手机浏览器标识符。如果存在，则认为用户可能正在使用手机访问。

根据屏幕尺寸也可以大致判断设备类型。通常情况下，手机的视口宽度较小。尽管这并不能准确区分平板电脑和一些小屏幕笔记本电脑，但对于大多数场景已经足够。设定一个阈值来区分“小屏幕”（可能为手机）和“大屏幕”（可能为桌面设备）：

function isMobileScreen() {
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

    // 选择一个合适的阈值，例如常见的手机横屏宽度
    const mobileThreshold = 768;

    return viewportWidth <= mobileThreshold;
}

if (isMobileScreen()) {
    console.log("访问设备可能是手机");
} else {
    console.log("访问设备可能不是手机");
}
复制

使用 window.matchMedia() 方法配合 CSS 媒体查询，可以更灵活地检测设备特性，如屏幕宽度：

function isMobileViaMatchMedia() {
    return window.matchMedia("(max-width: 768px)").matches;
}

if (isMobileViaMatchMedia()) {
    console.log("访问设备可能是手机");
} else {
    console.log("访问设备可能不是手机");
}
复制

为了获得更精确的设备和浏览器信息，可以使用专门的库来解析用户代理字符串。这些库能够提供详细的设备类型、操作系统、浏览器版本等信息，减少了手动维护正则表达式的复杂性。例如，使用 ua-parser-js：

import UAParser from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

if (result.device.type === 'mobile') {
    console.log("访问设备是手机");
} else {
    console.log("访问设备不是手机");
}
复制

请注意，随着设备多样性和浏览器特性的不断发展，上述方法可能会随着时间推移需要更新以适应新的设备和用户代理字符串变化。在实际应用中，建议结合项目需求选择合适的方法，或者使用成熟的跨平台框架（如 React、Vue、Angular）提供的内置响应式布局功能，它们通常已经封装了设备检测逻辑。