媒体查询检测设备是否是触摸屏
什么是使用媒体查询最安全的方式，使不在触摸屏设备上的事情发生？ 如果没有办法，你是否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标签中。 在这种情况下， touch和no-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年年中似乎并不普及。 代替…
-
Nick Zakas解释说 ，当浏览器不支持触摸时，Modernizr会应用
no-touchCSS类。 -
或者使用一段简单的代码检测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是一个非常大的库。 如果你所要做的只是检测触摸屏，当最终编译源的大小是一个要求时，这将是最好的。
