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

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

我建议使用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}

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

“指针”媒体功能用于查询指针设备（例如鼠标）的存在和准确性。如果设备具有多种输入机制，则建议UA报告主要输入机制中功能最弱的定点设备的特征。该媒体查询采用以下值：

'none'-
设备的输入机制不包括定点设备。

“粗略”
-设备的输入机制包括精度有限的定点设备。

'精细'
-设备的输入机制包括一个精确的指点设备。

可以这样使用：

/* 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项目中找到了与此有关的票证。

浏览器兼容性可以在以下位置进行测试 Quirksmode下。这些是我的结果（2013年1月22日）：

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

截至2013年中，CSS解决方案似乎尚未广泛使用。代替...

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

2. 或使用一段简单的代码在JavaScript中进行检测，从而使您能够实现自己的类似Modernizr的解决方案：

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

   然后，您可以将CSS编写为：

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

媒体类型不允许您将触摸功能检测为标准的一部分：

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上运行。我为此找到了一个解决方案：-moz-touch-enabled

因此，这是跨浏览器的媒体查询：

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

实际上有一个媒体查询：

@media (hover: none) { … }

除了Firefox之外，它还受到很好的支持。Safari和Chrome是移动设备上最常见的浏览器，它可能需要足够的使用才能被广泛采用。

这将起作用。如果没有让我知道

@media (hover: none) and (pointer: coarse) {
    /* Touch screen device style goes here */
}

编辑：不再支持按需悬停

在所有浏览器都全局支持CSS4之前，此解决方案将一直有效。当那一天到来时，请使用CSS4。但是直到那时，这对于当前的浏览器仍然有效。

browser-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

该解决方案避免使用现代化器，因为现代化器库是一个很大的库。如果您要做的就是检测触摸屏，那么当需要最终编译源的大小时，这将是最好的选择。

使用JS或jQuery向主体添加类触摸屏

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }

我可以使用此方法解决此问题

@media (hover:none), (hover:on-demand) { 
Your class or ID{
attributes
}    
}