JJJ*_*jim 117 css touch media-queries
使用媒体查询时最安全的方法是什么,以便在不在触摸屏设备上时发生某些事情？如果没有办法,你建议使用像!window.TouchModernizr 这样的JavaScript解决方案吗？
Zna*_*kus 156
在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;
}
}
可以在Quirksmode上测试浏览器兼容性.这些是我的结果(2013年1月22日):
Sim*_*ast 49
截至2013年中期,CSS解决方案似乎没有广泛使用.代替...
Nicholas Zakas解释说,no-touch当浏览器不支持触摸时,Modernizr会应用CSS类.
或者使用简单的代码在JavaScript中检测,允许您实现自己的类似Modernizr的解决方案:
<script>
document.documentElement.className +=
(("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>
然后你可以把你的CSS写成:
.no-touch .myClass {
...
}
.touch .myClass {
...
}
Sta*_*arx 37
我建议使用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(启用触摸).但是这些功能并非适用于所有浏览器.
对于Apple设备,您可以简单地使用:
if(window.TouchEvent) {
//.....
}
特别是对于Ipad:
if(window.Touch) {
//....
}
但是,这些在Android上不起作用.
Modernizr提供了功能检测功能,检测功能是一种很好的编码方式,而不是基于浏览器的编码.
为了这个目的,Modernizer为HTML标记添加了类.在这种情况下,touch并且no-touch使您可以通过.touch前缀您选择风格你触摸相关的方面.例如.touch .your-container.致谢:Ben Swinburne
Ale*_*x W 34
媒体类型不允许您将触摸功能检测为标准的一部分:
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>
小智 26
2017年,第二个答案的CSS媒体查询仍无法在Firefox上运行.我找到了一个解决方案:-moz-touch-enabled
所以,这里是跨浏览器媒体查询:
@media (-moz-touch-enabled: 1), (pointer:coarse) {
.something {
its: working;
}
}
Buz*_*zut 17
实际上有一个媒体查询:
@media (hover: none) { … }
除了Firefox之外,它得到了相当好的支持.Safari和Chrome是移动设备上最常见的浏览器,它可能足够采用.
小智 10
这将起作用。如果它不让我知道
@media (hover: none) and (pointer: coarse) {
/* Touch screen device style goes here */
}
编辑：不再支持按需悬停