【JavaScript 】判断是否是移动端

原创于 2025-06-05 09:10:37 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

js简单自定义方法、预定义方法积累专栏收录该内容

9 篇文章

订阅专栏

通过 userAgent 检测

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

if (isMobileDevice()) {
    console.log("这是移动设备");
} else {
    console.log("这不是移动设备");
}

通过屏幕宽度检测

function isMobileView() {
    return window.innerWidth <= 768; // 常见的移动设备断点
}

if (isMobileView()) {
    console.log("移动端视图");
} else {
    console.log("桌面端视图");
}

结合触摸事件检测

function isTouchDevice() {
    return 'ontouchstart' in window || navigator.maxTouchPoints;
}

if (isTouchDevice()) {
    console.log("支持触摸的设备");
} else {
    console.log("非触摸设备");
}

使用现代 API 检测【推荐使用】

function isMobile() {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    
    // 检查用户代理
    if (/android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(userAgent)) {
        return true;
    }
    
    // 检查屏幕尺寸和触摸支持
    if (window.innerWidth <= 800 && window.innerHeight <= 600) {
        return true;
    }
    
    // 检查设备像素比和屏幕方向
    if (window.matchMedia("(max-width: 768px)").matches && (window.matchMedia("(orientation: portrait)").matches || 
        window.matchMedia("(orientation: landscape)").matches)) {
        return true;
    }
    
    return false;
}

使用媒体查询检测

function isMobileMediaQuery() {
    return window.matchMedia("only screen and (max-width: 768px)").matches;
}