javascript - CSS 媒体查询不足以检测超大型移动/平板设备与桌面设备
问题描述
通常,在针对台式机检测移动或平板设备时,我使用以下媒体查询。
@media only screen and (min-width: 991px)
我有一个表格组件,它使用 CSS 中的可见性设置在悬停时呈现每行中的操作按钮。但是,当设备低于 min-width 991px 时,图标始终可见,因为移动设备不使用悬停。
现在的问题是横向和 iPad 专业版的 iPad 比宽度 991 更重要。是否有更高级的媒体查询或 Javascript 代码可以用来检测它是移动/iPad 设备还是桌面浏览器。
我正在使用 React 并为应用动态样式的内联媒体查询创建了自定义钩子,但这也有同样的问题。
感谢 Jonas 添加一些关于屏幕尺寸媒体查询的建议,但这不包括我的问题。我正在使用媒体查询来关闭悬停模式,一些大型平板电脑属于笔记本电脑的屏幕尺寸。下面提供了一个很好的答案。
解决方案
我不会尝试检测设备。更好的办法是寻求支持。在这种情况下,您想知道设备是否支持指针设备并能够悬停。如果不能悬停,那么至少它应该支持触摸。通过触摸,您仍然可以访问焦点状态。
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; }
}
尚未测试此代码,但这就是我开始研究解决方案的方式。
推荐阅读
- linux - 无法在 debugfs 中删除文件
- reactjs - 如何在 django rest 框架中播放上传的视频
- python - 删除 OpenCV 中未使用的形状
- cmake - 父 CMAKE_SOURCE_DIR 的 FetchContent 问题
- aws-api-gateway - 无服务器:从 SecretsManager 值创建 api 密钥
- r - 如何根据前一列的名称重命名列
- python - 加载torchtext模型+词汇进行推理的正确方法
- python - 最大最小流量算法
- python - 更新的代码 - 如何使用 xlsxwriter 将所有值放在 Python 中的列中
- dropzone - 多次上传时的 Dropzone 加载问题