浏览器/手机检测的可用解决方案有哪些？ [英] What are available solutions of a browser / mobile phone detection
问题描述
我正在为各种移动平台创建一个phonegap应用程序，我想知道什么是目前浏览器/手机检测的最佳解决方案？
我应该用服务器或客户端检测，或者我可以通过媒体类型的屏幕宽度使用CSS解决方案？
- 06.03.2013 - 在WURFL章节中添加一些评论
简介：
有几种可用的解决方案，但我只会命名开放源码的解决方案，至少解决方案主要用于jQuery / jQuery Mobile。另外值得警告的是，这个话题有可能引发一场战争。一方面，我们有支持服务器端检测的支持者以及他们的社区维护数据库，另一方面，我们有客户端支持者用浏览器嗅探。
服务器端：
WURFL -
WURFL（Wireless Universal Resource FiLe）创建于2002年，是一款价值
的流行开源框架，用于解决移动Web开发人员和移动
生态系统中其他利益相关者的设备碎片
问题。 WURFL一直是并且仍然是移动开发者采用的事实上的标准
设备描述库。 WURFL是
开源（AGPL v3）和ScientiaMobile的商标。
好：
非常详细的检测，您可能会得到更多的数据，然后确实需要。
良好的平台支持，api可用于Java，PHP和.Net。
不良：
不是总是最新的，严重依赖社区
在iPhone的情况下，无法知道iOS版本，因此媒体类型查询检测像素比率。
仅限非商业用途的费用，旧版本仍可免费用于商业用途，但他们只能使用更新的数据库更新至WURFL EULA。
PHP示例：
<？php
//包含配置配给文件
include_once'./inc/wurfl_config_standard.php';
$ wurflInfo = $ wurflManager-> getWURFLInfo（）;
if（isset（$ _ GET ['ua']）&&trim;（$ _ GET ['ua']））{
$ ua = $ _GET ['ua'] ;
$ requestsDevice = $ wurflManager-> getDeviceForUserAgent（$ _ GET ['ua']）;
} else {
$ ua = $ _SERVER ['HTTP_USER_AGENT'];
//此行通过查看HTTP请求（$ _SERVER）
$ requestsDevice = $ wurflManager-> getDeviceForHttpRequest（$ _ SERVER）来检测访问设备;
}
？>
< html>
< head>
< title> WURFL PHP API示例< / title>
< / head>
< body>
< h3> WURFL XML INFO< / h3>
< ul>
< li>< h4> VERSION：<？php echo $ wurflInfo-> version; ？> < / H4>< /锂>
< / ul>
< div id =content>
用户代理：< b> <？php echo htmlspecialchars（$ ua）; ？> < / B个
< ul>
< li> ID：<？php echo $ requestsDevice-> id; ？> < /锂>
< li>品牌名称：<？php echo $ requestsDevice-> getCapability（'brand_name'）; ？> < /锂>
< li>模型名称：<？php echo $ requestsDevice-> getCapability（'model_name'）; ？> < /锂>
< li>营销名称：<？php echo $ requestsDevice-> getCapability（'marketing_name'）; ？> < /锂>
< li>首选标记：<？php echo $ requesDevice-> getCapability（'preferred_markup'）; ？> < /锂>
< li>分辨率宽度：<？php echo $ requesDevice-> getCapability（'resolution_width'）; ？> < /锂>
< li>分辨率高度：<？php echo $ requestsDevice-> getCapability（'resolution_height'）; ？> < /锂>
< / ul>
< p>< b>通过提供用户代理来查询WURFL：< / b>< / p>
< form method =getaction =index.php>
< div>用户代理：< input type =textname =uasize =100value =<？php echo isset（$ _ GET ['ua']）？htmlspecialchars $ _GET ['ua']）：'';？> />
< input type =submit/>< / div>
< / form>
< / div>
< / body>
< / html>
如果您想自定义此代码，请更改 wurfl_config_standard.php file。
Modernizr是了解用户浏览器的绝佳方式
功能。但是，您只能在浏览器
本身上访问其API，这意味着您无法轻易从您的服务器逻辑中了解
浏览器功能中受益。 modernizr-server
库是将Modernizr浏览器数据传送到服务器
脚本环境的一种方式。
好：
与WURFL非常详细的检测一样，但我们需要考虑到它是以不同的目的构建WURFL。
不好：
只支持PHP，但有时这样就足够了。 / p>
示例： $ b
< ;! DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Modernizr服务器示例< / title>
< / head>
< body>
<？php
include（'modernizr-server.php'）;
print'服务器知道：';
foreach（$ modernizr as $ feature => $ value）{
print< br /> $ feature：;的print_r（$值）;
}
？>
< / body>
< / html>
< h2>客户端：
Modernizer - p>
新的web技术的优点是非常有趣，直到你
必须支持滞后的浏览器。 Modernizr使
很容易编写条件JavaScript和CSS来处理每种情况，
浏览器是否支持某个功能。轻松完成
的渐进增强效果是完美的。
良好：
只有客户端，服务器端组件不存在
快速但仍然很大的JavaScript框架，其12kb。由于它的模块化，它可以变得更小，这取决于您的需求。
坏：
Modernizr本身是了解用户浏览器功能的好方法。但是，您只能在浏览器上访问其API，这意味着您无法轻易从您的服务器逻辑中了解浏览器功能中受益。
- 可以在这里找到： http://modernizr.com/
示例：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Modernizr示例< / title>
< script src =modernizr.min.js>< / script>
< / head>
< body>
< script>
if（Modernizr.canvas）{
//支持
} else {
//不支持本地画布支持:(
）
< / body>
< / html>
有争议的是，这可能是（在学术上）检测移动设备的最坏方式
，但确实有其优点。
好：
简单
不良：
< script type =text / javascript>
var agent = navigator.userAgent;
）var isWebkit =（agent.indexOf（AppleWebKit）> 0）;
var isIPad =（agent.indexOf（iPad）> 0）;
va r 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& amp; screen.width< 1000））;
var isUnknownMobile =（isWebkit&& isSmallScreen）;
var isMobile =（isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile）;
var isTablet =（isIPad ||（isMobile&&！isSmallScreen））; （isMobile&& isSmallScreen&& document.cookie.indexOf（mobileFullSiteClicked =）< 0）mobileRedirect（）;
。
< / script>
I am creating a phonegap application for various mobile platforms and I was wondering what is a current best solution of browser/mobile phone detection?
Should I go with a server or a client side detection or could I use css solution through a media types screen width?
Changes:
- 06.03.2013 - Addad a few comments inside a WURFL chapter
Intro :
There are few available solutions but I will only name open-source ones, at least solutions mostly used with a jQuery/jQuery Mobile. Also be warned, this topic has the potential to start a war. On one side we have a proponents of server side detection with their community maintained databases and on the other side we have client side advocates with their browser sniffing.
Server side:
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.
Good :
Very detailed detection, you would probably get more data then is really needed.
Good platform support, api's are available for Java, PHP and .Net.
Bad :
Not always up to date, heavy dependency on community
In case of iPhone there's no way of knowing an iOS version, so media type queries to detect pixel ratios.
Fee only for a non commercial usage, older version are still free for commercial usage but they can only use database updated up to WURFL EULA changes.
- It can be found here: http://wurfl.sourceforge.net/apis.php
PHP example :
<?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>
If you want to customize this code, change configuration parameters inside a wurfl_config_standard.php file.
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.
Good :
Like WURFL very detailed detection, but we need to take into consideration that it is build with a different purpose the WURFL.
Bad :
Only supported on PHP, but sometimes this will be enough.
Example :
<!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>
- It can be found here: https://github.com/jamesgpearce/modernizr-server
Client side:
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.
Good :
Only client side, server side component don't exist
Fast but still large for a javascript framework with its 12kb. Because of its modularity it can become smaller, depending on your needs.
Bad :
Can do only so much, less info then server side detection.
Modernizr itself 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.
- It can be found here: http://modernizr.com/
Example :
<!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.
Good :
Simple
Bad :
Where to begin
Example :
<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>
这篇关于浏览器/手机检测的可用解决方案有哪些？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
