2019年如何检测触摸设备？答案

【问题标题】：How to detect touch device in 2019?2019年如何检测触摸设备？
【发布时间】：2019-10-12 22:55:54
【问题描述】：

对于我的应用，我需要彻底改变使用屏幕键盘（例如移动设备、触摸电视）与鼠标/kbd 设备（例如台式机、带有蓝牙鼠标/kbd 的移动设备）的触摸设备的整个用户体验。

注意。我已经用 CSS 网格和媒体查询了解了响应式布局，因此处理了这方面的问题。我的问题不在于布局，而是整个用户体验需要完全不同。到目前为止，我最好的选择是在整个视口上监听鼠标移动。

如何使用现代浏览器做到这一点？

请注意，我已经阅读了已有几年的现有答案，并且通常得出的结论是无法完成。

【问题讨论】：

您可能需要仔细考虑“触摸设备”的含义。支持触控的桌面有很多，而且可能还会更多。通常 UI 是基于屏幕尺寸的，触摸支持是基于检测的。触摸与用户交互有关，实际上与屏幕大小无关。
完全正确。所以与其说我想检测触摸，不如说我想检测鼠标/键盘的缺失。屏幕大小对我的应用程序来说相对不重要，而在重要的地方，我已经涵盖了网格/媒体查询。就我的目的而言，支持触摸/平板模式的翻盖笔记本电脑之类的东西就是台式机。如果有办法检测到用户已将其切换到平板电脑模式，那就太好了。
我发现它对检测触摸设备很有用stackoverflow.com/a/4819886/9161843

标签： javascript html css google-chrome mobile-website

【解决方案1】：

这真的很简单，只需要一行代码：

const touch = matchMedia('(hover: none)').matches;

- 什么？ matchMedia?
- 这只是一个用于执行 CSS @media 查询的 JS API。现代浏览器支持它：https://caniuse.com/#feat=matchmedia。当然，你可以直接在 CSS 中使用这样的查询：

@media (hover: none){
    /* touch stuff goes here */
}

- 好的，什么@media 查询也可能有用？

@media (hover: none) and (pointer: coarse) {
    /* touchscreens */
}
@media (hover: none) and (pointer: fine) {
    /* stylus */
}
@media (hover: hover) and (pointer: coarse) {
    /* controllers */
}
@media (hover: hover) and (pointer: fine) {
    /* mouse or touchpad */
}

但这只会查询主要输入法。如果你想更深入，你可以使用any-hover和any-pointer查询所有输入设备。

UPD：删除旧浏览器的 hack，似乎大多数旧浏览器也不支持 hover 和 pointer 媒体查询。您可以使用其他答案中的触摸事件检测和仅触摸navigator 属性

UPD2：在您的情况下，最好使用

const touch = matchMedia('(hover: none), (pointer: coarse)').matches;

【讨论】：

【解决方案2】：

你可以在这里使用一个简单的条件来检测使用 Javascript

if(('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
    //this is a touch device you can any action here 
}else {
    //it's not touch device another code here
}

另外，点击这里的链接https://ctrlq.org/code/19616-detect-touch-screen-javascript

【讨论】：

如果有人在 2021 年登陆这里：这是 navigator.maxTouchPoints 而不是 navigator.MaxTouchPoints

【解决方案3】：

在 javascript 中。

 if ("ontouchstart" in document.documentElement)
    {
        document.write("your device is a touch screen device.");
    }
    else
    {
         document.write("your device is NOT a touch device");
    }

code pen

【讨论】：

这如何识别连接了指针和键盘设备的触摸设备与没有连接的触摸设备？这就是 OP 的要求。