Question

使用媒体查询最安全的方法是什么，以便在不在触摸屏设备上时发生某些事情？如果没有办法，您建议使用JavaScript解决方案，例如!window.Touch或Modernizr吗？

Answer 1

'指针'媒体功能用于查询存在和   诸如鼠标之类的指示设备的准确性。如果设备有   多输入机制，建议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项目中发现a ticket与此相关。

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

Chrome / Win：正常工作
Chrome / iOS：不起作用
Safari / iOS6：不起作用

Answer 2

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

Nicholas Zakas explains当浏览器不支持触摸时，Modernizr会应用no-touch CSS类。

或者使用简单的代码在JavaScript中检测，允许您实现自己的类似Modernizr的解决方案：

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

然后您可以将CSS编写为：

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

Answer 3

我建议使用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 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上运行。我找到了一个解决方案：http://www.wadewegner.com/2012/09/getting-the-application-id-and-hardware-id-in-windows-store-applications/

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

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

Answer 6

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

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

编辑：不再支持按需悬停

Answer 7

This solution will work until CSS4 is globally supported by all browsers. When that day comes just use CSS4. but until then, this works for current browsers.

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())
};

onload:

old way:

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

newer way:

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

The above code will add the "is-touch" class to the body tag if the device has a touch screen. Now any location in your web application where you would have css for :hover you can call body:not(.is-touch) the_rest_of_my_css:hover

for example:

button:hover

becomes:

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

This solution avoids using modernizer as the modernizer lib is a very big library. If all you're trying to do is detect touch screens, This will be best when the size of the final compiled source is a requirement.

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

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

9 个答案:

样式触摸元素