CSS媒体查询不足以检测超大型移动/平板设备与桌面设备[重复]

Posted 2023-05-08

技术标签:

【中文标题】CSS媒体查询不足以检测超大型移动/平板设备与桌面设备[重复]【英文标题】：CSS Media Queries not sufficient enough to detect extra large mobile/tablet devices vs desktop [duplicate] 【发布时间】：2020-02-15 12:20:05 【问题描述】：

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

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

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

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

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

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

【问题讨论】：

【参考方案1】：

我不会尝试检测设备。更好的办法是寻求支持。在这种情况下，您想知道设备是否支持指针设备并能够悬停。如果不能悬停，那么至少它应该支持触摸。通过触摸，您仍然可以访问焦点状态。

HTML

<div class="row">
    <div class="td">
        <a class="btn btn-primary" title="buy">
            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
            <span>Add to shopping cart</span>
        </a>
    </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) 
    .row .btn span  display: inline-block; 
    .row .btn .fa  display: none; 
    .row .btn:hover .fa,
    .row .btn:active .fa,
    .row .btn:focus .fa  display: inline-block;

尚未测试此代码，但这是我开始研究解决方案的方式。

https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134 https://caniuse.com/#feat=css-media-interaction Media query for devices supporting hover

【讨论】：

谢谢蒂姆！这正是我所需要的。