3 回答
TA贡献1842条经验 获得超21个赞
我建议使用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
TA贡献1796条经验 获得超7个赞
实际上,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:不起作用
- 3 回答
- 0 关注
- 409 浏览
相关问题推荐
添加回答
举报