前端如何准确判断用户是否为移动设备：最佳实践与多层回退策略

var hasTouchScreen = false;
var UA = navigator.userAgent;

hasTouchScreen = (
    /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
    /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
); 

if (hasTouchScreen) {
    // 设备可能是移动设备，执行移动端相关逻辑
    console.log("检测到移动设备（通过User Agent）");
} else {
    console.log("未检测到移动设备（通过User Agent）");
}

var hasTouchScreen = false;

if ("maxTouchPoints" in navigator) {
    hasTouchScreen = navigator.maxTouchPoints > 0;
} 

if (hasTouchScreen) {
    // 设备可能是移动设备（或触摸屏设备），执行移动端相关逻辑
    console.log("检测到触摸屏设备（通过maxTouchPoints）");
} else {
    console.log("未检测到触摸屏设备（通过maxTouchPoints）");
}

var isMobileDevice = false;

// 优先使用 navigator.maxTouchPoints
if ("maxTouchPoints" in navigator) {
    isMobileDevice = navigator.maxTouchPoints > 0;
} 
// 兼容旧版IE/Edge的触摸点属性
else if ("msMaxTouchPoints" in navigator) {
    isMobileDevice = navigator.msMaxTouchPoints > 0;
} 
// 使用媒体查询检测粗粒度指针（通常是触摸屏）
else {
    var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
    if (mQ && mQ.media === "(pointer:coarse)") {
        isMobileDevice = !!mQ.matches;
    } 
    // 检查 window.orientation 属性（已废弃但仍可作为回退）
    else if ('orientation' in window) {
        isMobileDevice = true; // 存在 orientation 通常意味着是移动设备
    } 
    // 作为最后的回退，使用 User Agent 嗅探
    else {
        var UA = navigator.userAgent;
        isMobileDevice = (
            /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
            /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
        );
    }
}

if (isMobileDevice) {
    console.log("检测到移动设备（最健壮方法）");
    // 执行移动端特定逻辑
} else {
    console.log("未检测到移动设备（最健壮方法）");
    // 执行桌面端特定逻辑
}