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

什么是使用媒体查询最安全的方式,使不在触摸屏设备上的事情发生? 如果没有办法,你是否build议使用JavaScript解决scheme,如!window.Touch或Modernizr?

我会build议使用modernizr并使用其媒体查询function。

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

但是,使用CSS,就像在Firefox中的伪类一样。 您可以使用:-moz-system-metric(启用触摸) 。 但是这些function并不适用于每一个browswers。

对于Apple设备,您可以简单使用:

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

特别为Ipad

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

但是,这些不适用于Android

Modernizr提供了特征检测function,检测特征是编码的一种好方法,而不是基于浏览器进行编码。

造型触摸元素

Modernizer为了这个确切的目的把类添加到html标签中。 在这种情况下, touchno-touch所以你可以通过在.touch前加上你的select器来devise触摸相关的方面。 例如.touch .your-container学分:Ben Swinburne

实际上在CSS4媒体查询草案中有一个属性。

“指针”媒体function用于查询指针设备(如鼠标)的存在和准确性。 如果设备具有多个input机制,则build议UA报告主input机制中function最差的指针设备的特性。 此媒体查询采取以下值:

'没有'
– 设备的input机制不包括指点设备。

'粗'
– 该设备的input机制包括精确度有限的指示设备。

'精细'
– 该设备的input机制包括一个精确的指针设备。

这将用于这样的:

 /* Make radio buttons and check boxes larger if we have an inaccurate pointing device */ @media (pointer:coarse) { input[type="checkbox"], input[type="radio"] { min-width:30px; min-height:40px; background:transparent; } } 

我还在与此相关的Chromium项目中find了一张票 。

浏览器兼容性可以在Quirksmode中testing。 这些是我的结果(2013年1月22日):

  • Chrome / Win:有效
  • Chrome / iOS:不起作用
  • Safari / iOS6:不起作用

CSS解决scheme在2013年年中似乎并不普及。 代替…

  1. Nick Zakas解释说 ,当浏览器不支持触摸时,Modernizr会应用no-touch CSS类。

  2. 或者使用一段简单的代码检测JavaScript,从而实现您自己的Modernizr解决scheme:

     <script> document.documentElement.className += (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch'); </script> 

    然后你可以写你的CSS为:

     .no-touch .myClass { ... } .touch .myClass { ... } 

媒体types不允许您检测触摸function作为标准的一部分:

http://www.w3.org/TR/css3-mediaqueries/

所以,没有办法通过CSS或媒体查询一致地做到这一点,你将不得不诉诸于JavaScript。

不需要使用Modernizr,你可以使用普通的JavaScript:

 <script type="text/javascript"> var is_touch_device = 'ontouchstart' in document.documentElement; if(is_touch_device) alert("touch is enabled!"); </script> 

在2017年,来自第二个答案的CSS媒体查询仍然无法在Firefox上运行。 我find了一个解决scheme: -moz-touch-enabled


那么,这里是跨浏览器的媒体查询:

 @media (-moz-touch-enabled: 1), (pointer:coarse) { .something { its: working; } } 

这个解决scheme将一直工作到所有浏览器全局支持CSS4。 当那一天到来时,只需使用CSS4。 但在此之前,这适用于当前的浏览器。

浏览器util.js中

 export const isMobile = { android: () => navigator.userAgent.match(/Android/i), blackberry: () => navigator.userAgent.match(/BlackBerry/i), ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i), opera: () => navigator.userAgent.match(/Opera Mini/i), windows: () => navigator.userAgent.match(/IEMobile/i), any: () => (isMobile.android() || isMobile.blackberry() || isMobile.ios() || isMobile.opera() || isMobile.windows()) }; 

负载:

老方法:

 isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null; 

较新的方式:

 isMobile.any() ? document.body.classList.add('is-touch') : null; 

如果设备有触摸屏,上面的代码会将“is-touch”类添加到body标签。 现在你的Web应用程序中的任何位置,你会有CSS:hover你可以调用body:not(.is-touch) the_rest_of_my_css:hover

例如:

 button:hover 

变为:

 body:not(.is-touch) button:hover 

这个解决scheme避免使用modernizer,因为modernizer lib是一个非常大的库。 如果你所要做的只是检测触摸屏,当最终编译源的大小是一个要求时,这将是最好的。