Question

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

NB。我已经将响应式布局与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 document.documentElement)
    {
        document.write("your device is a touch screen device.");
    }
    else
    {
         document.write("your device is NOT a touch device");
    }

code pen

Answer 3

您可以在此处使用简单条件来检测使用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
}

此外，请点击以下链接h ttps://ctrlq.org/code/19616-detect-touch-screen-javascript

-谢谢-

如何在2019年检测触摸设备？

3 个答案: