一尘不染

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

css

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


阅读 243

收藏
2020-05-16

共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

2020-05-16