html - CSS - 仅在触摸屏设备上显示元素

Question

我的布局中 80% 的按钮是带有工具提示的图标，描述了出​​现在 :hover 上的功能

如果在触摸屏设备上查看网站，是否可以仅使用 CSS 和媒体查询来显示其他类(例如 .button-info)。除了通过分辨率和方向猜测用户可能使用的是哪种设备之外？

Answer 1

您请求的是 W3C 为 CSS4开发:http://dev.w3.org/csswg/mediaqueries-4/#pointer

你会使用:

@media (pointer: coarse) and (hover: none) {
    /* your touchscreen specific rules */
}

但它现在不可用，因此您必须使用具有设备宽度和方向的解决方法。

注意:如果您想使用纯 CSS 解决方案。