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

前端之家收集整理的这篇文章主要介绍了css – 媒体查询以检测设备是否为触摸屏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
什么是最安全的方式,使用媒体查询,使不发生在触摸屏设备上时发生的事情?如果没有办法,你建议使用JavaScript解决方案,如!window.Touch或Modernizr?

解决方法

我建议使用 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).但这些功能不可用于每个browswers。

对于Apple设备,可以简单使用:

if(window.TouchEvent) {
   //.....
}

专门为Ipad

if(window.Touch) {
    //....
}

但是,这些不工作在Android。

07003 gives feature detection abilities,and detecting features is
a good way to code,rather than coding on basis of browsers.

称呼触摸元素

为了这个确切的目的,Modernizer向html标签添加类。在这种情况下,触摸和无触摸,因此您可以通过为选择器加上.touch前缀来设置触摸相关方面的样式。例如.touch。你的容器。学分:Ben Swinburne

原文链接:https://www.f2er.com/css/223601.html

猜你在找的CSS相关文章