2019年如何检测触控设备？

Question

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

注意。我已经用 CSS 网格和媒体查询来研究响应式布局，所以这个方面得到了处理。我的问题不是布局之一，而是整个 UX 需要从根本上不同。到目前为止，我最好的选择是在整个视口上监听鼠标移动。

我怎样才能使用现代浏览器做到这一点？

注意我已经阅读了已有好几年的现有答案，并且通常得出结论认为这是不可能的。

Answer 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：黑客对旧的浏览器删除，好像最旧的浏览器不支持hover和pointer媒体查询了。您可以使用navigator其他答案中的触摸事件检测和仅触摸属性

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

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

Answer 2

您可以在此处使用简单的条件使用 Javascript 进行检测

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

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