CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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。

称呼触摸元素

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

大佬总结

以上是大佬教程为你收集整理的css – 媒体查询以检测设备是否为触摸屏全部内容,希望文章能够帮你解决css – 媒体查询以检测设备是否为触摸屏所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: