CSS 媒体查询不足以检测超大型移动/平板设备与台式机

Question

通常，在针对台式机检测移动或平板电脑设备时，我使用以下媒体查询。

@media only screen and (min-width: 991px)

我有一个表格组件，它使用 CSS 中的可见性设置在悬停时呈现每行中的操作按钮。但是，当设备低于 min-width 991px 时，图标始终可见，因为移动设备不使用悬停。

现在的问题是横向和 iPad 专业版中的 iPad 比宽度 991 更重要。是否有更高级的媒体查询或 Javascript 代码我可以用来检测它是移动/iPad 设备还是桌面浏览器。

我正在使用 React 并为应用动态样式的内联媒体查询创建了自定义钩子，但这有同样的问题。

感谢 Jonas 添加了一些关于使用屏幕尺寸的媒体查询的建议，但这并没有涵盖我的问题。我正在使用媒体查询来关闭悬停模式，一些大型平板电脑的屏幕尺寸低于笔记本电脑的屏幕尺寸。下面提供了一个很好的答案。

Answer 1

我不会尝试去检测设备。更好的主意是寻求支持。在这种情况下，您想知道设备是否支持指针设备并且能够悬停。如果不能悬停，那么至少它应该支持触摸。通过触摸，您仍然可以访问焦点状态。HTML<div class="row">&nbsp; &nbsp; <div class="td">&nbsp; &nbsp; &nbsp; &nbsp; <a class="btn btn-primary" title="buy">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-shopping-cart" aria-hidden="true"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Add to shopping cart</span>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div></div>CSS.row .btn span { display: none; } // mobile first don't display the button text.row .btn .fa { display: inline-block; } // mobile first display icon@media (any-hover: hover) {&nbsp; &nbsp; .row .btn span { display: inline-block; }&nbsp; &nbsp; .row .btn .fa { display: none; }&nbsp; &nbsp; .row .btn:hover .fa,&nbsp; &nbsp; .row .btn:active .fa,&nbsp; &nbsp; .row .btn:focus .fa { display: inline-block; }}尚未测试此代码，但这是我开始研究解决方案的方式。