检测平板电脑的完美方法是什么？

Question

我正在寻找检测平板电脑的完美方法。通过媒体查询，您可以为特定 CSS 设置最小和最大宽度。但有些平板电脑的分辨率比某些台式显示器更高。这样就会产生冲突。

使用 Javascript（Modernizr、Detectivizr）可以识别平板电脑，并在 HTML 中使用 HTML 标签上的“平板电脑”类进行设置。但是...并非所有用户都启用了 Javascript。

所以你想要的是（在我看来）使用 CSS 来检测平板电脑。有谁知道这个问题的完美解决方案吗？

提前致谢！

Answer 1

你可以检查

navigator.userAgent

，但它的JavaScript，就像这样：

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

---

编辑

我发现了这个：

@media only screen and (max-width: 760px) {
    /* Styles for phones */
}

这似乎可以检测浏览器的宽度是否是智能手机的大小。

请参阅this问题中的答案以获取更多信息

Answer 2

您可以通过使用 CSS 媒体查询获得合理的准确度：

@media only screen 
and (max-device-height : 768px) 
and (max-device-width : 1024px)
{
    /* CSS Styles go here..... */
}

以上内容应检测设备屏幕尺寸何时小于小于 1024x768（台式机的常见屏幕尺寸）。

正如您上面所说，如果您只使用 CSS 并不完美，因为某些平板电脑的屏幕尺寸大于 1024x768。

据我所知，提高准确性的唯一方法是使用 javascript 来嗅探

userAgent

字符串。请参阅 GeenHenk 链接到的问题（在 jQuery 中检测移动设备的最佳方法是什么？）。

Answer 3

使用 mobile-detect.js 怎么样？我刚刚在我的项目中使用了它 - 它有很好的

.tablet()

方法。

更新（对于 maxshuty）

我按以下方式使用它：

var md = new MobileDetect(window.navigator.userAgent);
if( md.tablet() || !md.phone() ) {
    // your code here
}

Answer 4

2024：随着新的平板电脑，即 Galaxy S9 tab，所有这些方法都不再起作用。最大触摸将在边缘下方失败。用户代理不再显示 android。设备对象通常是空的。您甚至无法检测它是否是移动设备。为我们的大项目寻找解决方案，但对于供应商的决策而言，这几乎是不可能的。