为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

守候你守候我 2019-10-08 09:44:23
在不使用触摸屏设备的情况下,使用媒体查询最安全的方法是什么?如果无法解决,您是否建议使用JavaScript解决方案,例如!window.TouchModernizr或Modernizr?
查看完整描述

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


查看完整回答
反对 回复 2019-10-08
?
芜湖不芜

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:不起作用


查看完整回答
反对 回复 2019-10-08
  • 3 回答
  • 0 关注
  • 409 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信