use*_*145 6 javascript php jquery html5 jquery-mobile
我正在为各种移动平台创建一个phonegap应用程序,我想知道什么是当前浏览器/手机检测的最佳解决方案？
我应该使用服务器或客户端检测,还是可以通过媒体类型屏幕宽度使用css解决方案？
Gaj*_*res 16
可用的解决方案很少,但我只会命名开源解决方案,至少解决方案主要与jQuery/jQuery Mobile一起使用.另外要注意的是,这个话题有可能引发战争.一方面,我们有一个服务器端检测的支持者和他们的社区维护数据库,另一方面,我们有客户端支持他们的浏览器嗅探.
WURFL -
WURFL(无线通用资源FiLe)创建于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>
现代化 -
酷炫的新网络技术的优势非常有趣,直到您必须支持落后的浏览器.无论浏览器是否支持某项功能,Modernizr都可以让您轻松编写条件JavaScript和CSS来处理每种情况.它非常适合轻松进行渐进式增强.
好的:
仅存在客户端,服务器端组件
对于具有12kb的javascript框架,速度快但仍然很大.由于其模块化,它可以变小,取决于您的需求.
坏:
只能这么多,服务器端检测的信息少.
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>
有争议的是,这可能(在学术上)是检测移动设备的最糟糕方式,但它确实有其优点.
好的:
简单
坏:
从哪里开始
示例:
<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>
| 归档时间： |
|
| 查看次数： |
2640 次 |
| 最近记录： |