2019年如何检测触摸设备？

Question

对于我的应用，我需要从根本上改变使用屏幕键盘的触摸设备（例如手机、触摸电视）与 mouse/kbd 设备（例如台式机、带蓝牙的手机）的整个用户体验 mouse/kbd).

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

如何使用现代浏览器执行此操作？

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

Answer 1

在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

Answer 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
}

此外，下面link这里https://ctrlq.org/code/19616-detect-touch-screen-javascript

Answer 3

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

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

- 什么？ matchMedia?
- 这只是一个 JS API 来做 CSS @media 查询。现代浏览器支持它：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 媒体查询。您可以使用其他答案中的触摸事件检测和 touch-only navigator 属性

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

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

2019年如何检测触摸设备？

How to detect touch device in 2019?

javascript

html

css

google-chrome

mobile-website