如何编写CSS媒体查询来检测触摸屏设备?

时间:2014-10-24 10:34:39

标签: css3 touch

我相信我应该为不同的输入方法设计我的网站。我相信主流输入类型是鼠标+键盘和触摸屏。我想使用CSS来检测我的用户是否使用了触摸输入。我想增加链接列表的行高,以便用手指轻松选择。

这可能吗?

2 个答案:

答案 0 :(得分:1)

根据这篇文章,还没有“可靠”的方法来检测触摸设备: http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

我通常采用的方法是使用CSS媒体查询来检测不同的屏幕尺寸。您可以为每个设备分辨率设置一个带有媒体查询的样式表,这是设备上可用的总大小,而不仅仅是屏幕(浏览器大小)。 请参阅此备忘单获取灵感: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

希望它有所帮助。

编辑:屏幕尺寸将告诉您哪个设备可能正在查看当前页面

答案 1 :(得分:1)

  

我想使用CSS来检测我的用户是否使用触摸输入。

2019年,几乎所有浏览器现在都可以理解interaction @media queries

@media only screen and (hover: none) {

  [... CSS HERE...]
}

指示主要交互方法 不是鼠标指针(或具有悬停功能的类似设备)。

这通常意味着主要的交互方法是 touch


浏览器兼容性

https://caniuse.com/#feat=css-media-interaction