如何使用 TouchEvent 檢測移動設備，但也可以使用 javascript 區分觸摸屏 PC

Question

我知道有很多類似的問題。

目前，我使用下面的代碼來檢測觸摸屏設備並將它們標記為移動設備。

    function isMobile() {
    try {
        document.createEvent("TouchEvent");
        console.log("mobile");
        return true;
    }
    catch (e) {
        console.log("pc");
        return false;
    }
}

它在移動設備上運行良好，但對於同時具有鍵盤和鼠標的觸摸屏 PC 而言又如何呢？ 我怎樣才能區分它們？

由於我沒有觸摸屏 PC，我無法測試和解決此問題。

我想確定它是移動設備，例如手機或平板電腦，基本上是沒有鼠標和鍵盤的設備，還是有鍵盤和鼠標的 PC。

Answer 1

如果您的目標只是檢測用戶是否在移動設備上，則使用TouchEvent並不是最好的方法。

這個 StackOverflow 答案詳細說明了如何檢測用戶是否使用 JS 在移動設備上。

Answer 2

我想確定它是移動設備，例如手機或平板電腦，基本上是沒有鼠標和鍵盤的設備，還是有鍵盤和鼠標的 PC。

您可以使用此答案提供的方法檢查設備是否具有鼠標指針：

const hasCursor = window.matchMedia('(pointer:fine)').matches

據我所知，這對於沒有指針的設備應該是錯誤的，所以帶有觸摸屏和觸摸板的筆記本電腦將不匹配這個，這應該是你所需要的。

檢測是否存在鍵盤更加困難，部分原因是大多數手機/平板電腦都支持可以使用的外部鍵盤。 您可能不需要此方法，因為第一種方法應該涵蓋所有情況，但您可以使用解決方法通過偵聽第一個keyup事件來檢測鍵盤是否存在：

let hasKeyboard = false
document.addEventListener("keyup", () => {
  hasKeyboard = true
}, { once: true })

然而，這很 hacky，好像鍵盤用戶從不使用他們的鍵盤，他們會顯示為沒有鍵盤。 僅在需要時才使用此方法，否則僅使用第一種方法。