javascript - 媒体查询 : How to target only tablet?

Question

我一直在研究媒体查询，并且了解移动优先设计的概念。

我知道，有很多关于媒体查询的问题，但没有一个针对我的具体问题。

我也理解使用这样的媒体查询构建样式表的概念:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

但是，我确实需要一种方法让我的样式表仅针对平板电脑，而不考虑浏览器分辨率(宽度和高度)。在 2015 年检查浏览器宽度不够安全(而且绝对不是我正在寻找的)，因为有些平板电脑的分辨率比旧台式机的分辨率更高。

这是我到目前为止尝试过的事情的列表:

1. 我列出了“常见”的平板电脑分辨率，并简单地指定了详细的媒体查询。在我找到平板电脑后，这种方法失败了宽度为 1024 像素(与旧版桌面浏览器相同)。
2. 我阅读了很多关于媒体查询的文章，发现现代浏览器(尤其是平板电脑上的浏览器)有时会忽略“@media only screen”等规范，而且媒体查询的大多数值都是 deprecated .

1.) 是否有一种安全的方法来定位平板电脑，而不管其媒体查询的分辨率如何？

2.) 有什么方法可以使用 JavaScript/JQuery 来查明浏览器是否在平板电脑(触摸屏)上使用？

也许某些 css 属性或 JavaScript 函数仅在平板电脑上“触发”(我没有想法)？感谢您的帮助。

Answer 1

你可以使用这个:

@media only screen and (min-device-width: 768px){}

供引用:Media Queries: How to target desktop, tablet and mobile?