检测媒体查询，如果设备是触摸屏(Media query to detect if device is

什么是最安全的方式，利用媒体查询，使在不发生事情触摸屏设备上？ 如果没有办法，你建议使用JavaScript的解决方案，如!window.Touch或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-系统度量（触摸功能的） 。 但这些功能并不适用于所有浏览器。

对于苹果的设备，你可以简单的使用方法：

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

特别适用于iPad：

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

但是，这些并不在Android上工作 。

Modernizr的给人特征检测能力，检测的特点是代码的好办法，而不是浏览器的基础编码。

造型触控组件

近代化增加了类此确切目的的HTML标签。 在这种情况下， touch和no-touch ，所以你可以通过.touch前缀您选择风格你触摸相关的方面。 例如.touch .your-container 。 ^{现金：本斯温伯恩}

Answer 2:

其实有一个在这个属性CSS4媒体查询草案 。

的“指示器”媒体特征用于查询有关的指示设备的存在和精度，诸如鼠标。 如果器件具有多个输入机构，它建议在UA报告的主要输入机制的至少能够指示设备的特性。 该媒体查询需要以下值：

'没有'
- 该设备的输入机构不包括指示装置。

'粗'
- 该设备的输入机构包括有限精度的定点设备。

'精细'
- 该设备的输入机构包括一个精确的指示装置。

这将被用作这样的：

/* 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项目。

浏览器的兼容性可以被测试怪异模式 。 这些是我的结果（2013年1月22日）：

• 镀铬/ WIN：工程
• 镀铬/ iOS版：不工作
• Safari浏览器/ iOS6的：不工作

Answer 3:

CSS的解决方案似乎并没有被广泛使用的2013年中期的。 代替...

1. 尼古拉斯Zakas解释说Modernizr的应用一个no-touch时，浏览器不支持触摸CSS类。

2. 或在JavaScript中检测与一段简单的代码，让您实现自己的Modernizr样的解决方案：

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

   然后，你可以写你的CSS为：

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

Answer 4:

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

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>

Answer 5:

2017年，从第二个答案CSS媒体查询仍然无法在Firefox上运行。 我发现一个soluton： -moz-触摸功能

---

所以，这里是跨浏览器的媒体查询：

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

Answer 6:

其实是有针对媒体查询：

@media (hover: none) { … }

除了从Firefox，它是相当不错的支持 。 Safari和Chrome是在移动设备上最常用的浏览器，它可能就足够了，直到更多的采用。

Answer 7:

该解决方案将工作，直到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;

上面的代码将添加“是触摸”级到主体标签如果设备具有触摸屏。 现在，在你的web应用程序的任何位置，你会对CSS：悬停你可以打电话body:not(.is-touch) the_rest_of_my_css:hover

例如：

button:hover

变为：

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

该解决方案避免了使用现代化主义作为近代化的lib是一个非常大的图书馆。 如果你正在试图做的一切是检测触摸屏，这将是最好的时候，最后编译源的大小是一个要求。

Answer 8:

添加类触摸屏使用JS或jQuery的身体

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

Answer 9:

我能解决这个使用这个问题

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

文章来源: Media query to detect if device is touchscreen