我正在为各种移动平台创建一个 phonegap 应用程序，我想知道目前浏览器/手机检测的最佳解决方案是什么？
我应该使用服务器还是客户端检测，还是可以通过媒体类型屏幕宽度使用 css 解决方案？
问问题
2771 次
3 回答
16
变化：
- 06.03.2013 - 在 WURFL 章节中添加一些评论
介绍 ：
可用的解决方案很少，但我只会命名开源的，至少是主要用于 jQuery/jQuery Mobile 的解决方案。还要注意，这个话题有可能引发一场战争。一方面，我们有服务器端检测的支持者，他们的社区维护的数据库，另一方面，我们有客户端的支持者，他们的浏览器嗅探。
服务器端：
WURFL -
WURFL（无线通用资源文件）创建于 2002 年，是一种流行的开源框架，旨在为移动 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，这意味着您无法轻松地从了解服务器逻辑中的浏览器功能中受益。modernizr-server 库是一种将 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>
客户端：
现代化者-
利用很酷的新 Web 技术非常有趣，除非您必须支持落后的浏览器。Modernizr 使您可以轻松编写条件 JavaScript 和 CSS 来处理每种情况，无论浏览器是否支持某个功能。它非常适合轻松进行渐进增强。
好的 ：
只有客户端，服务器端组件不存在
对于 12kb 的 javascript 框架来说，速度很快但仍然很大。由于其模块化，它可以变得更小，具体取决于您的需要。
坏的 ：
只能做这么多，更少的信息然后服务器端检测。
Modernizr 本身是了解用户浏览器功能的好方法。但是，您只能在浏览器本身上访问其 API，这意味着您无法轻松地从了解服务器逻辑中的浏览器功能中受益。
- 可以在这里找到：http: //modernizr.com/
例子 ：
<!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>
有争议的是，这可能（在学术上）是检测移动设备的最糟糕的方法，但它确实有其优点。
好的 ：
简单的
坏的 ：
从哪里开始
例子 ：
<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>
于 2013-02-24T18:56:50.617 回答
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;
}
于 2013-02-24T20:29:40.327 回答
0
我编写了类似这样的代码来获取设备操作系统类型... $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 有时无法得到您想要的。
于 2014-08-27T09:07:51.823 回答