Question

有没有办法检测用户是使用平板电脑还是手机？举个例子，一个人使用平板电脑（任何版本为3+和iPad的安卓平板电脑）上网，他们肯定希望看到与坐在台式电脑上的人一样不被剥离的版本。而手机冲浪者肯定更喜欢网站的精简版本，因为它加载速度更快，并且可能更容易用拇指导航。这可以通过检查此处找到的userAgent oct屏幕宽度来完成：

What is the best way to detect a mobile device in jQuery?

但问题出现在像谷歌Galaxy Nexus这样的手机上，它具有与平板电脑相同的分辨率，但只有屏幕尺寸的一半。在我看来，即使分辨率很高，显示移动版也会更好，因为屏幕很小。

有没有办法检测到这一点，还是我必须做出妥协？

Answer 1

我认为您在此处对平板电脑，手机或任何其他支持网络的设备进行了根本性的区分。屏幕的物理尺寸似乎是您要用来指定所投放内容的指标。

在这种情况下，我会尝试根据HTTP标头（[mobiforge.com...]）中用户代理传递的值来实现逻辑，并优雅地降级以提示用户信息是否不可用。

您的逻辑可能看起来像这样：

如果用户代理在HTTP标头中提供物理屏幕尺寸物理尺寸= UA值。
否则，如果用户代理supplies a resolution and pixel dimensions
物理尺寸=像素尺寸除以分辨率。
（可选）否则，use client side script to detect resolution and PPI
否则，如果用户代理字符串看起来像某种移动设备（正则表达式）
提示用户选择。
否则
假设默认选项。

<强>更新：我的答案现在已经三岁了。值得注意的是，对响应式设计的支持已经取得了显着进展，现在通常会向所有设备提供相同的内容，并依靠css媒体查询以对其正在查看的设备最有效的方式呈现网站。 / p>

Answer 2

如果您在理论上使用媒体查询，可以使用@media掌上电脑，但支持几乎不存在。

识别高分辨率移动设备的最简单方法是查看屏幕的DPI和设备像素比（目前通过webkit / mozilla供应商特定标签）

@media (-webkit-max-device-pixel-ratio: 2),  
(max--moz-device-pixel-ratio: 2), 
(min-resolution: 300dpi) {
   ...
}

编辑：window.devicePixelRatio在JS中执行上述操作

这里有一篇很好的文章，其中包含许多识别移动设备的想法。

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Answer 3

根据谷歌的建议：found here（也由Greg引用）这是我之前在项目中使用的内容。

    if(/Mobile/i.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent) ){
        console.log("it's a phone");//your code here 
    }

它可能不是最优雅的解决方案......但它确实起到了作用。

Answer 4

如果您使用的是Cordova，我喜欢这样：

cordova plugin add uk.co.workingedge.phonegap.plugin.istablet

然后代码中的任何地方都会调用：

window.isTablet

Answer 5

不幸的是，截至目前，区分移动设备和平板电脑的唯一可靠方法是通过用户代理字符串。

我还没有找到包含设备维度的用户代理。

如果您尝试计算设备ppi，它们几乎都不可避免地会出现96ppi，无论是桌面还是手机。

在用户代理字符串中搜索iPad / iPod / iPhone以检测任何Apple设备。这将告诉您是否有Apple的平板电脑或手机/ iPod。幸运的是，i-devices的口味要少得多，因此也可以更容易区分它们。

要识别Android设备，请在用户代理字符串中搜索“Android”。要确定它是平板电脑还是手机，手机用户代理（原生Android浏览器和Chrome）将包含“Mobile Safari”，而平板电脑只包含“Safari”。 Google推荐使用此方法：

作为移动网站的解决方案，我们的Android工程师建议使用具体检测用户代理字符串中的“移动”以及 “机器人”。

可以在此处找到更全面的描述：

http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html

当然这并不理想，但看起来是唯一可靠的手段。作为警告，通过查看用户代理字符串的大样本列表（接近一百个），我确实看到一个或两个旧设备没有正确地遵守“移动”与“移动Safari”的区别。

Answer 6

您可以使用Device Atlas之类的内容来检测用户代理的这些功能。提供您可以自己托管的API，它们还提供云服务。两者都是溢价（付费）

或者你也可以使用Wurfl之类的东西，根据我的经验，这些东西不太准确。

Answer 7

为什么在你问他们时试着猜猜用户有什么？您可以使用分辨率来猜测正在使用哪种设备，并询问用户他们想要的视图，如果它属于可能的移动设备或平板电脑类别。如果你发现它错了，那么这对用户来说是一件麻烦事。在我看来，他们曾经问过哪种类型的设备更方便。

Answer 8

我认为WURFL可能需要关注： http://wurfl.sourceforge.net/help_doc.php 它更硬核，因为它更多的服务器端解决方案，而不是简单地通过简单的媒体查询（例如你自己的或使用像基金会CSS的框架）或纯javascript（adapt.js）。

可以做类似的事情：

$is_wireless = ($requestingDevice->getCapability('is_wireless_device') == 'true');
$is_smarttv = ($requestingDevice->getCapability('is_smarttv') == 'true');
$is_tablet = ($requestingDevice->getCapability('is_tablet') == 'true');
$is_phone = ($requestingDevice->getCapability('can_assign_phone_number') == 'true');

if (!$is_wireless) {
 if ($is_smarttv) {
  echo "This is a Smart TV";
 } else {
  echo "This is a Desktop Web Browser";
 }
} else {
 if ($is_tablet) {
  echo "This is a Tablet";
 } else if ($is_phone) {
  echo "This is a Mobile Phone";
 } else {
  echo "This is a Mobile Device";
 }
}

参考：http://wurfl.sourceforge.net/php_index.php

或在Java中：

WURFLHolder wurfl = (WURFLHolder) getServletContext().getAttribute(WURFLHolder.class.getName());
WURFLManager manager = wurfl.getWURFLManager();
Device device = manager.getDeviceForRequest(request);
String x = device.getCapability("is_tablet"); //returns String, not boolean btw

参考：http://wurfl.sourceforge.net/njava_index.php

Answer 9

正如许多其他海报所述，您可能想要解析User-Agent请求标头。为此，我发现ua-parser-js库非常有用。

检测手机与平板电脑

9 个答案: