html - 如何找出设备上是否存在鼠标以隐藏某些 html 元素？

Question

您知道当浏览我网站的设备上没有鼠标时，是否可以通过 Bootstrap 3 类或它的其他一些功能来隐藏一些 html？

Answer 1

对此有三种可能的解决方案，但没有一种能完全奏效:

1. 用户代理检测 - 编译您已知为触摸屏(无鼠标)的设备的用户代理列表，并使用 navigator.userAgent 检查它们是否正在使用。 这可能行不通，因为人们可以在某些移动浏览器中更改他们的用户代理，而且几乎不可能找到所有可能的触摸屏用户代理的列表。
2. 使用 Modernizr 等特征检测库。 This answer解释得很好。 然而，这些检测触摸事件，但一些桌面浏览器有这些，所以这会告诉你一些东西是触摸屏，而实际上它不是。
3. 检测窗口的高度和宽度。大多数移动设备的屏幕都很小，但某些触摸屏设备(如平板电脑)的屏幕可能与某些计算机一样大，这意味着它并不总是有效。您可以使用 window.innerHeight 和 window.innerWidth ( this wouldn't work in IE )。您也可以使用 CSS media queries在这里。