时间戳

首页 > 解决方案 > 2019年如何检测触摸设备？

javascript - 2019年如何检测触摸设备？

问题描述

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

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

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

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

标签： javascripthtmlcssgoogle-chromemobile-website

解决方案

这非常简单，只需一行代码：

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-hoverandany-pointer来查询所有输入设备。

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

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

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

推荐阅读