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

Question

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

Answer 2

实际上，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：不起作用