什么是浏览器/手机检测的可用解决方案

时间:2013-02-24 18:49:59

标签: php javascript jquery html5 jquery-mobile

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

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

3 个答案:

答案 0 :(得分:16)

的变化:

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

简介:

可用的解决方案很少,但我只会说开源解决方案,至少解决方案主要与jQuery / jQuery Mobile一起使用。另外要注意的是,这个话题有可能引发战争。一方面,我们有一个服务器端检测的支持者和他们的社区维护数据库,另一方面,我们有客户端支持他们的浏览器嗅探。

服务器端:

WURFL -

  

创建于2002年的WURFL(无线通用资源FiLe),是一款   流行的开源框架解决了设备碎片问题   移动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 - Server -

  

Modernizr是了解用户浏览器的绝佳方式   能力。但是,您只能在浏览器上访问其API   本身,这意味着你不能轻易从中获益   服务器逻辑中的浏览器功能。现代化服务器   library是一种将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>

客户端:

Modernizer -

  

酷炫的新网络技术的优势非常有趣,直到你   必须支持落后的浏览器。 Modernizr让它变得简单   你要编写条件JavaScript和CSS来处理每种情况,   浏览器是否支持某项功能。这是完美的   渐进式增强。

好:

仅客户端,服务器端组件不存在

快速但仍然很大的javascript框架与其12kb。由于其模块化,它可以变小,取决于您的需求。

糟糕:

只能执行这么多,而不是服务器端检测的信息。

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>

JavaScript based browser sniffing

  

有争议的是,这可能是(在学术上)最糟糕的方式   检测手机,但确实有它的优点。

好:

简单

糟糕:

从哪里开始

示例:

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

答案 1 :(得分: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;
}

答案 2 :(得分:0)

我已编写类似这样的代码来获取设备的os类型... $ 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有时候无法得到你想要的东西。