如何用JavaScript通过TouchEvent检测移动设备并区分触屏PC

你当前的代码仅通过TouchEvent判断触屏能力，无法区分带键鼠的触屏PC和无键鼠的移动设备，可通过以下几种思路优化：

1. 结合输入设备行为检测 #

通过监听鼠标、键盘的实际输入事件，结合触屏能力判断：

function isMobileWithoutKeyboardMouse() {
    // 先确认设备支持触屏
    const hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    if (!hasTouchSupport) {
        console.log("pc");
        return Promise.resolve(false);
    }

    let hasMouseOrKeyboard = false;

    // 监听首次鼠标移动事件
    window.addEventListener('mousemove', () => {
        hasMouseOrKeyboard = true;
    }, { once: true });

    // 监听首次键盘按键事件
    window.addEventListener('keydown', () => {
        hasMouseOrKeyboard = true;
    }, { once: true });

    // 短延迟后判断：无键鼠输入则判定为移动设备
    return new Promise((resolve) => {
        setTimeout(() => {
            const result = !hasMouseOrKeyboard;
            console.log(result ? "mobile" : "touch pc");
            resolve(result);
        }, 500); // 延迟时长可根据实际需求调整
    });
}

说明：无键鼠的移动设备不会触发鼠标/键盘事件，而触屏PC用户通常会使用键鼠操作，通过这种实际行为判断更精准。

2. 结合设备指针特性判断 #

利用媒体查询区分指针精度，移动设备的触摸属于粗糙指针，鼠标属于精细指针：

function isMobileDevice() {
    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const hasFinePointer = window.matchMedia('(pointer: fine)').matches;

    // 有触屏但无精细指针 → 移动设备
    if (hasTouch && !hasFinePointer) {
        console.log("mobile");
        return true;
    }

    // 有触屏且有精细指针 → 触屏PC
    if (hasTouch && hasFinePointer) {
        console.log("touch pc");
        return false;
    }

    // 无触屏 → 纯PC
    console.log("pc");
    return false;
}

说明：这种方式无需等待用户操作，可快速判断，但如果移动设备外接了鼠标，会被判定为触屏PC，这也符合你的需求——只要使用了键鼠就归为PC类。

3. 避坑提示 #

• 不要单纯依赖navigator.userAgent，它可被修改且新设备标识更新频繁。
• 延迟判断的时间不宜过长，避免影响页面交互体验。
• 外接键鼠的移动设备会被判定为触屏PC，这是合理的，因为此时用户的使用场景更接近PC。

内容的提问来源于stack exchange，提问作者Furkan Gözükara