我正在为各种移动平台创建一个phonegap应用程序，我想知道什么是目前最好的浏览器/手机检测解决方案？
我应该使用服务器或客户端检测，还是可以通过媒体类型屏幕宽度使用css解决方案？
答案 0 :(得分：16)
可用的解决方案很少，但我只会说开源解决方案，至少解决方案主要与jQuery / jQuery Mobile一起使用。另外要注意的是，这个话题有可能引发战争。一方面，我们有一个服务器端检测的支持者和他们的社区维护数据库，另一方面，我们有客户端支持他们的浏览器嗅探。
WURFL -
创建于2002年的WURFL（无线通用资源FiLe），是一款 流行的开源框架解决了设备碎片问题 移动Web开发人员和移动设备中的其他利益相关者的问题 生态系统。 WURFL一直并且仍然是事实上的标准 移动开发人员采用的设备描述存储库。 WURFL是 开源（AGPL v3）和ScientiaMobile的商标。
好：
非常详细的检测，你可能会得到更多的数据然后真的需要。
良好的平台支持，api可用于Java，PHP和.Net。
糟糕：
并非总是最新，对社区的依赖程度很高
如果是iPhone，则无法了解iOS版本，因此媒体类型会查询以检测像素比率。
仅限非商业用途的费用，旧版本仍可免费用于商业用途，但他们只能使用更新的数据库更新至WURFL EULA。
PHP示例：
<?php
// Include the configuration file
include_once './inc/wurfl_config_standard.php';
$wurflInfo = $wurflManager->getWURFLInfo();
if (isset($_GET['ua']) && trim($_GET['ua'])) {
$ua = $_GET['ua'];
$requestingDevice = $wurflManager->getDeviceForUserAgent($_GET['ua']);
} else {
$ua = $_SERVER['HTTP_USER_AGENT'];
// This line detects the visiting device by looking at its HTTP Request ($_SERVER)
$requestingDevice = $wurflManager->getDeviceForHttpRequest($_SERVER);
}
?>
<html>
<head>
<title>WURFL PHP API Example</title>
</head>
<body>
<h3>WURFL XML INFO</h3>
<ul>
<li><h4>VERSION: <?php echo $wurflInfo->version; ?> </h4></li>
</ul>
<div id="content">
User Agent: <b> <?php echo htmlspecialchars($ua); ?> </b>
<ul>
<li>ID: <?php echo $requestingDevice->id; ?> </li>
<li>Brand Name: <?php echo $requestingDevice->getCapability('brand_name'); ?> </li>
<li>Model Name: <?php echo $requestingDevice->getCapability('model_name'); ?> </li>
<li>Marketing Name: <?php echo $requestingDevice->getCapability('marketing_name'); ?> </li>
<li>Preferred Markup: <?php echo $requestingDevice->getCapability('preferred_markup'); ?> </li>
<li>Resolution Width: <?php echo $requestingDevice->getCapability('resolution_width'); ?> </li>
<li>Resolution Height: <?php echo $requestingDevice->getCapability('resolution_height'); ?> </li>
</ul>
<p><b>Query WURFL by providing the user agent:</b></p>
<form method="get" action="index.php">
<div>User Agent: <input type="text" name="ua" size="100" value="<?php echo isset($_GET['ua'])? htmlspecialchars($_GET['ua']): ''; ?>" />
<input type="submit" /></div>
</form>
</div>
</body>
</html>
如果要自定义此代码，请在 wurfl_config_standard.php 文件中更改配置参数。
Modernizr是了解用户浏览器的绝佳方式 能力。但是，您只能在浏览器上访问其API 本身，这意味着你不能轻易从中获益 服务器逻辑中的浏览器功能。现代化服务器 library是一种将Modernizr浏览器数据引入服务器的方法 脚本环境。
好：
与WURFL非常详细的检测一样，但我们需要考虑到它是以不同的目的构建WURFL。
糟糕：
仅支持PHP，但有时这就足够了。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modernizr Server Example</title>
</head>
<body>
<?php
include('modernizr-server.php');
print 'The server knows:';
foreach($modernizr as $feature=>$value) {
print "<br/> $feature: "; print_r($value);
}
?>
</body>
</html>
酷炫的新网络技术的优势非常有趣，直到你 必须支持落后的浏览器。 Modernizr让它变得简单 你要编写条件JavaScript和CSS来处理每种情况， 浏览器是否支持某项功能。这是完美的 渐进式增强。
好：
仅客户端，服务器端组件不存在
快速但仍然很大的javascript框架与其12kb。由于其模块化，它可以变小，取决于您的需求。
糟糕：
只能执行这么多，而不是服务器端检测的信息。
Modernizr本身是了解用户浏览器功能的好方法。但是，您只能在浏览器本身访问其API，这意味着您无法轻松了解服务器逻辑中的浏览器功能。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modernizr Example</title>
<script src="modernizr.min.js"></script>
</head>
<body>
<script>
if (Modernizr.canvas) {
// supported
} else {
// no native canvas support available :(
}
</script>
</body>
</html>
JavaScript based browser sniffing
有争议的是，这可能是（在学术上）最糟糕的方式 检测手机，但确实有它的优点。
好：
简单
糟糕：
从哪里开始
示例：
<script type="text/javascript">
var agent = navigator.userAgent;
var isWebkit = (agent.indexOf("AppleWebKit") > 0);
var isIPad = (agent.indexOf("iPad") > 0);
var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
var isAndroid = (agent.indexOf("Android") > 0);
var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
var isWebOS = (agent.indexOf("webOS") > 0);
var isWindowsMobile = (agent.indexOf("IEMobile") > 0);
var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
var isUnknownMobile = (isWebkit && isSmallScreen);
var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
var isTablet = (isIPad || (isMobile && !isSmallScreen));
if ( isMobile && isSmallScreen && document.cookie.indexOf( "mobileFullSiteClicked=") < 0 ) mobileRedirect();
</script>
答案 1 :(得分：2)
这可能不是最佳解决方案，但我在javascript中使用此功能供个人使用。
顺便说一句，@ Gajotres感谢您提供深刻而有用的信息。
function mobilMi()
{
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)||
navigator.userAgent.match(/iPad/i)
){
return 1;
}
else
return 0;
}
答案 2 :(得分：0)
我已编写类似这样的代码来获取设备的os类型... $ test将是用户代理的字符串
if (preg_match("/linux/i", $test) && preg_match("/android/i", $test)) {
$device_type = 'Android';
} else if (preg_match("/windows phone/i", $test)){
$device_type = '<font size="6">Windows Mobile</font>';
} else if (preg_match("/windows nt/i", $test)){
$device_type = 'Windows';
} else if (preg_match("/linux/i", $test)){
$device_type = 'Linux';
} else if (preg_match("/macintosh/i", $test)){
$device_type = 'Macintosh';
} else if (preg_match("/iphone/i", $test)){
$device_type = 'iPhone';
} else if (preg_match("/ipad/i", $test)){
$device_type = 'iPad';
} else if (preg_match("/symbian/i", $test)){
$device_type = 'Symbian';
} else if (preg_match("/blackberry/i", $test)){
$device_type = 'Blackberry';
} else
$device_type = 'None';
我认为您需要了解模式并获取关键字。使用WURFL有时候无法得到你想要的东西。