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

Question

我有一个布局，其中80%的按钮都是带有工具提示说明功能的图标，在:hover时出现。

如果仅使用CSS和媒体查询，在触摸屏设备上查看网站时，是否可能只显示附加类（例如.button-info），而不是猜测用户所使用的设备的分辨率和方向？

- Pejs

---

你尝试过使用:focus吗？ - Morpheus

由于这需要检测触摸功能是否启用，因此请尝试查看此线程；https://dev59.com/y2445IYBdhLWcg3wg6tm - MrMarlow

:focus 怎么用于这个目的？MrMarlow，我想避免使用jQuery。 - Pejs

a:focus + .button-info {} 或 a:focus ~ .button-info {}，取决于您的按钮位置。 - Morpheus

Answer 1

您所请求的功能正在由W3C开发，用于CSS4：http://dev.w3.org/csswg/mediaqueries-4/#pointer 您可以使用以下内容：

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

但是现在它尚不可用，所以您需要使用设备宽度和方向的解决方法。

NB: 假如您想使用仅CSS的解决方案。

- Antoine Combes

---

你的回答或许将来会有用，但我现在不觉得发表它有意义。 - Morpheus

楼主问有没有一种原生而非hack的CSS方法来检测触摸屏，我正在回答。 - Antoine Combes

如果你的答案暂时无法解决问题，你会接受自己的答案吗？ - Morpheus

如果我已经有一个解决方案，但仍然希望有一个更好的解决方案，那么我会这样做。 - Antoine Combes

实际上，我认为那个回答说目前还没有这样的解决方案是非常有用的，因为它可以节省进一步搜索的时间。 - Pejs

可以在2018年使用！谢谢。 - Cory Kleiser

Answer 2

与此问题类似（用于检测设备是否为触摸屏的媒体查询），

这位作者提出了一些有价值的观点，建议您考虑。

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

他谈到了实现你想做的事情的各种方法，然后解释了其中的陷阱。最终得出结论，如果你试图检测它是否是触摸屏，则可能已经走错路了。

考虑将所有用户视为触摸屏用户，因为不是每个人都用鼠标光标四处查看屏幕。

- hman