媒体查询：如何仅定位平板电脑？

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. 我列出了“普通”平板电脑分辨率并简单指定 详细的媒体查询。我发现平板电脑后这种方法失败了 宽度为1024px（与旧版桌面浏览器相同）。
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?

Answer 2

简答：不。

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

所以我想说，选择功能检测，定位您感兴趣的功能，除了媒体查询之外，最好的方法是Modernizr。

您可以查看他们的custom builds page，然后选择您感兴趣的功能（触摸事件？地理位置？），知道您获得了经过良好测试的可靠库的支持。