检测手机和平板电脑

Question

有没有办法检测用户使用的是否为平板电脑或手机？ 例如，使用平板电脑（任何版本为3+的Android平板电脑和iPad）上网冲浪的人肯定希望查看与使用台式电脑的人相同的未削弱版本。而使用手机冲浪的人肯定更喜欢网站的精简版，因为它加载速度更快，可能更容易用拇指导航。 可以通过检查此处找到的userAgent或屏幕宽度来完成此操作：What is the best way to detect a mobile device in jQuery? 但问题出现在像Google Galaxy Nexus这样的手机上，它的分辨率与平板电脑相同，但屏幕尺寸只有一半。我认为，即使分辨率很高，由于屏幕小，最好还是显示移动版。 是否有方法检测这个，或者我必须做出妥协？

- just_user

Answer 1

我认为你在平板电脑、手机或任何其他网络设备之间做了一个基本的任意区分。似乎屏幕的物理尺寸是你想要用来决定提供的内容的度量标准。

在这种情况下，建议基于用户代理在HTTP头中传递的值实现逻辑 ([mobiforge.com...])，并在信息不可用时优雅地降级提示用户。

你的逻辑可能会像这样：

• 如果用户代理在HTTP头中提供物理屏幕尺寸
  物理尺寸=UA值。
  
• 否则，如果用户代理提供分辨率和像素尺寸
  物理尺寸=像素尺寸÷分辨率。
• (可选) 否则，使用客户端脚本检测分辨率和PPI
• 否则，如果用户代理字符串看起来像某种移动设备 (正则表达式)
  提示用户进行选择。
• 否则
  假设一个默认选项。

---

更新：我的回答现在已经三年了。值得注意的是，支持响应式设计已经取得了显著进展，现在常见的做法是向所有设备提供相同的内容，并依靠CSS媒体查询以最有效的方式呈现站点在不同设备上的样式。

- Sam Greenhalgh

Answer 2

根据谷歌的建议：可在此找到（Greg也提到过），这是我之前在项目中使用的东西。

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

也许这不是最优雅的解决方案……但它能胜任工作。

- Fernando

Answer 3

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

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

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

编辑：使用JS来设置window.devicePixelRatio以实现上述效果。

这里有一篇很好的文章，提供了很多识别移动设备的想法。

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

- ryan j

---

顺便说一句，个人认为如果有可能的话最好避免嗅探UA。 - ryan j

Answer 4

如果您正在使用Cordova，我喜欢这样做：

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

然后在您的代码中随处调用此函数：

window.isTablet

- Post Impatica

Answer 5

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

我还没有找到包含设备尺寸的用户代理。如果您尝试计算设备像素密度，几乎所有设备都不可避免地会得出96ppi的结果，无论是台式机还是手机。

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

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

针对移动站点的解决方案，我们的Android工程师建议在User-Agent字符串中特别检测“mobile”和“android”。

可以在此处找到更详细的说明：

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

当然，这并不是理想的情况，但看起来似乎是唯一可靠的手段。需要提醒的是，从查看一个大规模的用户代理字符串列表（接近一百个）中，我确实看到了一两个旧设备没有正确遵守“Mobile”与“Mobile Safari”的区分。

- Greg

Answer 6

您可以使用类似Device Atlas的工具，通过User Agent检测这些特性。他们提供了一个API，您可以自己托管，同时也提供云服务。两者都是高级版（需付费）。

另外，您也可以使用类似Wurfl的工具，但在我个人经验中，它的准确性较低。

- darryn.ten

Answer 7

为什么要猜测用户使用的设备，而不直接询问呢？你可以利用分辨率来猜测所使用的设备类型，并在可能是移动设备或平板电脑的情况下询问用户需要哪种视图。如果你猜错了，那对用户来说就很麻烦了。在我看来，询问一次用户拥有哪种设备类型更加方便。

- Matt Esch

Answer 8

正如其他帖子所指出的那样，您很可能需要解析User-Agent请求头。为此，我发现 ua-parser-js库非常有用。

- Matt Sgarlata

Answer 9

我认为WURFL可能是值得一看的东西： http://wurfl.sourceforge.net/help_doc.php 它更加专业，因为它是一种服务器端解决方案，而不是简单地通过媒体查询（例如您自己的查询或使用Foundation 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

- armyofda12mnkeys

---

顺便提一下一些好的额外信息：http://mobile.smashingmagazine.com/2012/09/24/server-side-device-detection-history-benefits-how-to/ https://dev59.com/GF_Va4cB1Zd3GeqPW8ta - armyofda12mnkeys