我应该使用服务器或客户端检测,还是可以通过媒体类型屏幕宽度使用css解决方案？
> 06.03.2013 – 在WURFL章节中添加了一些评论
介绍 ：
可用的解决方案很少,但我只会命名开源解决方案,至少解决方案主要与jQuery / jQuery Mobile一起使用.另外要注意的是,这个话题有可能引发战争.一方面,我们有一个服务器端检测的支持者和他们的社区维护数据库,另一方面,我们有客户端支持他们的浏览器嗅探.
服务器端：
WURFL –
Created in 2002,WURFL (Wireless Universal Resource FiLe),is a
popular open-source framework to solve the device-fragmentation
problem for mobile Web developers and other stakeholders in the mobile
ecosystem. WURFL has been and still is the de facto standard
device-description repository adopted by mobile developers. WURFL is
open source (AGPL v3) and a Trademark of ScientiaMobile.
好的：
非常详细的检测,你可能会得到更多的数据然后真的需要.
良好的平台支持,api可用于Java,PHP和.Net.
坏：
并不总是最新,严重依赖社区
在iPhone的情况下,无法知道iOS版本,因此媒体类型查询以检测像素比率.
仅用于非商业用途的费用,旧版本仍然可以免费用于商业用途,但他们只能使用更新到WURFL EULA更改的数据库.
>可以在这里找到：http://wurfl.sourceforge.net/apis.php
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 – Server –
Modernizr is a great way to find out about your user’s browser
capabilities. However,you can only access its API on the browser
itself,which means you can’t easily benefit from kNowing about
browser capabilities in your server logic. The modernizr-server
library is a way to bring Modernizr browser data to your server
scripting environment.
好的：
像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>
>可以在这里找到：https://github.com/jamesgpearce/modernizr-server
客户端：
Modernizer –
aking advantage of cool new web technologies is great fun,until you
have to support browsers that lag behind. Modernizr makes it easy for
you to write conditional JavaScript and CSS to handle each situation,
whether a browser supports a feature or not. It’s perfect for doing
progressive enhancement easily.
好的：
仅存在客户端,服务器端组件
对于具有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>
JavaScript based browser sniffing
It is arguable that this may be (academically) the worst possible way
to detect mobile but it does have its virtues.
好的：
简单
坏：
从哪里开始
示例：
<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>