浏览器/手机检测有哪些可用的解决方案

我正在为各种移动平台创建一个 phonegap 应用程序，我想知道当前浏览器/手机检测的最佳解决方案是什么?

我应该使用服务器或客户端检测，还是可以通过媒体类型屏幕宽度使用 css 解决方案?

解决方案

变更:

• 06.03.2013 - 在 WURFL 章节中添加一些评论

介绍:

可用的解决方案很少，但我只会列出开源的解决方案，至少主要用于 jQuery/jQuery Mobile 的解决方案.还请注意，这个话题有可能引发战争.一方面，我们支持使用他们社区维护的数据库进行服务器端检测，另一方面，我们拥有使用浏览器嗅探的客户端支持者.

服务器端:

WURFL -

<块引用>

创建于 2002 年的 WURFL(无线通用资源文件)是一个解决设备碎片化的流行开源框架移动 Web 开发人员和移动中的其他利益相关者的问题生态系统.WURFL 一直是并且仍然是事实上的标准移动开发人员采用的设备描述存储库.WURFL 是开源 (AGPL v3) 和 ScientiaMobile 的商标.

好:

非常详细的检测，你可能会得到更多的数据，然后才是真正需要的.

良好的平台支持，API 可用于 Java、PHP 和 .Net.

糟糕:

不总是最新的，严重依赖社区

如果是 iPhone，则无法知道 iOS 版本，因此通过媒体类型查询来检测像素比率.

仅对非商业用途收费，旧版本仍可免费用于商业用途，但只能使用更新至 WURFL EULA 更改的数据库.

• 可在此处找到:http://wurfl.sourceforge.net/apis.php

PHP 示例:

getWURFLInfo();if (isset($_GET['ua']) &&trim($_GET['ua'])) {$ua = $_GET['ua'];$requestingDevice = $wurflManager->getDeviceForUserAgent($_GET['ua']);} 别的 {$ua = $_SERVER['HTTP_USER_AGENT'];//此行通过查看其 HTTP 请求 ($_SERVER) 来检测访问设备$requestingDevice = $wurflManager->getDeviceForHttpRequest($_SERVER);}?><头><title>WURFL PHP API 示例</title><身体><h3>WURFL XML 信息</h3><ul><li><h4>版本:<?php echo $wurflInfo->version;?></h4></li><div id="内容">用户代理:<b><?php echo htmlspecialchars($ua);?></b><ul><li>ID: <?php echo $requestingDevice->id;?><li>品牌名称:<?php echo $requestingDevice->getCapability('brand_name');?><li>模型名称:<?php echo $requestingDevice->getCapability('model_name');?><li>营销名称:<?php echo $requestingDevice->getCapability('marketing_name');?><li>首选标记:<?php echo $requestingDevice->getCapability('preferred_markup');?><li>分辨率宽度:<?php echo $requestingDevice->getCapability('resolution_width');?><li>分辨率高度:<?php echo $requestingDevice->getCapability('resolution_height');?><p><b>通过提供用户代理来查询 WURFL:</b></p><form method="get" action="index.php"><div>用户代理:<input type="text" name="ua" size="100" value="<?php echo isset($_GET['ua'])? htmlspecialchars($_GET['ua']): ''; ?>"/><input type="submit"/></div></表单>

如果要自定义此代码，请更改 wurfl_config_standard.php 文件中的配置参数.

<小时>

Modernizr - 服务器 -

<块引用>

Modernizr 是了解用户浏览器的好方法能力.但是，您只能在浏览器上访问其 API本身，这意味着您不能轻易地从了解服务器逻辑中的浏览器功能.现代化服务器库是一种将 Modernizr 浏览器数据带到您的服务器的方法脚本环境.

好:

像 WURFL 非常详细的检测，但我们需要考虑到它是为了不同的目的而构建的 WURFL.

糟糕:

仅在 PHP 上支持，但有时这已经足够了.

示例:

<头><meta charset="utf-8"><title>Modernizr 服务器示例</title><身体><?phpinclude('modernizr-server.php');打印'服务器知道:';foreach($modernizr as $feature=>$value) {打印 "<br/> $feature: ";打印_r($值)；}?>

• 可以在这里找到:https://github.com/jamesgpearce/modernizr-server

客户端:

现代化者 -

<块引用>

利用酷炫的网络新技术非常有趣，直到您必须支持落后的浏览器.Modernizr 使你编写条件 JavaScript 和 CSS 来处理每种情况，浏览器是否支持某个功能.非常适合做轻松进行渐进增强.

好:

只有客户端，服务器端组件不存在

速度快，但对于 12kb 的 javascript 框架来说仍然很大.由于其模块化，它可以根据您的需要变得更小.

糟糕:

只能做这么多，比服务器端检测更少的信息.

Modernizr 本身是一种了解用户浏览器功能的好方法.但是，您只能在浏览器本身上访问其 API，这意味着您无法轻松地从服务器逻辑中的浏览器功能中获益.

• 可以在这里找到:http://modernizr.com/

示例:

 <头><meta charset="utf-8"><title>Modernizr 示例</title><script src="modernizr.min.js"></script><身体><脚本>如果(Modernizr.canvas){//支持的} 别的 {//没有可用的原生画布支持:(}

基于 JavaScript 的浏览器嗅探

<块引用>

有争议的是，这可能是(学术上)最糟糕的方式检测移动设备，但它确实有其优点.

好:

简单

糟糕:

从哪里开始

示例:

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 - 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.

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:

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.

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>