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