媒体查询：如何仅针对平板电脑？答案

【问题标题】：Media Queries: How to target only tablet?媒体查询：如何仅针对平板电脑？
【发布时间】：2015-05-19 18:42:03
【问题描述】：

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

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

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

/* 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 年检查浏览器宽度根本不够安全（而且绝对不是我要寻找的），因为某些平板电脑的分辨率比旧台式机更大。

这是我迄今为止尝试过的事情的列表：

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

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

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

也许有某个 css 属性或 JavaScript 函数只能在平板电脑上“触发”（我没有想法）？感谢您的帮助。

【问题讨论】：

标签： javascript jquery css media-queries tablet

【解决方案1】：

你可以用这个：

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

供参考：Media Queries: How to target desktop, tablet and mobile?

【讨论】：

您的答案涉及所有最小宽度为 768 像素的设备（我已经尝试过了）。不适用于仅解决平板电脑作为 OP 问题。

【解决方案2】：

简短回答：不。

我会说，现在的平板电脑是什么？有些手机太大了，看起来更像平板电脑，而有些平板电脑太小了，以至于它们与更大的手机市场重叠......

所以我想说，去特征检测，定位你感兴趣的特征，除了媒体查询，对我来说最好的方法是 Modernizr。

您可以查看他们的 custom builds page 并从字面上选择您感兴趣的功能（触摸事件？地理定位？），知道您得到了可靠且经过良好测试的库的支持。

【讨论】：