媒体查询以检测设备是否为触摸屏

Question

在不使用触摸屏设备的情况下，使用媒体查询最安全的方法是什么？如果无法解决，您是否建议使用JavaScript解决方案，例如!window.TouchModernizr或Modernizr？

Answer 1

我建议使用modernizr并使用其媒体查询功能。

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

但是，使用CSS时，存在伪类，例如Firefox。您可以使用：-moz-system-metric（touch-
enabled）。但是，并非所有浏览器都提供这些功能。

对于Apple设备，您可以简单地使用：

if(window.TouchEvent) {
   //.....
}

特别是对于Ipad：

if(window.Touch) {
    //....
}

但是，这些 在Android上不起作用 。

Modernizr提供了功能检测功能，并且检测功能是一种很好的编码方式，而不是基于浏览器进行编码。

样式触摸元素

为此，Modernizer将类添加到HTML标记中。在这种情况下，touch并且no-touch使您可以通过.touch前缀您选择风格你触摸相关的方面。例如.touch .your-container。鸣谢：Ben Swinburne