什么是瀏覽器/手機檢測的可用解決方案

Question

我正在為各種移動平台創建一個phonegap應用程序，我想知道什么是當前瀏覽器/手機檢測的最佳解決方案？

我應該使用服務器或客戶端檢測，還是可以通過媒體類型屏幕寬度使用css解決方案？

Answer 1

變化：

06.03.2013 - 在WURFL章節中添加一些評論

介紹：

可用的解決方案很少，但我只會命名開源解決方案，至少解決方案主要與jQuery / jQuery Mobile一起使用。 另外要注意的是，這個話題有可能引發戰爭。 一方面，我們有一個服務器端檢測的支持者和他們的社區維護數據庫，另一方面，我們有客戶端支持他們的瀏覽器嗅探。

服務器端：

WURFL -

WURFL（無線通用資源FiLe）創建於2002年，是一個流行的開源框架，用於解決移動Web開發人員和移動生態系統中其他利益相關者的設備碎片問題。 WURFL一直是移動開發人員采用的事實上的標准設備描述存儲庫。 WURFL是開源的（AGPL v3）和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 - 服務器 -

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>

它可以在這里找到： https ： //github.com/jamesgpearce/modernizr-server

客戶端：

現代化 -

酷炫的新網絡技術的優勢非常有趣，直到您必須支持落后的瀏覽器。 無論瀏覽器是否支持某項功能，Modernizr都可以讓您輕松編寫條件JavaScript和CSS來處理每種情況。 它非常適合輕松進行漸進式增強。

好的：

僅存在客戶端，服務器端組件

對於具有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的瀏覽器嗅探

有爭議的是，這可能（在學術上）是檢測移動設備的最糟糕方式，但它確實有其優點。

好的：

簡單

壞：

從哪里開始

示例：

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

Answer 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;
}

Answer 3

我有這樣的代碼來獲取設備的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有時候並不能得到你想要的東西。

什么是瀏覽器/手機檢測的可用解決方案

問題描述

3 個解決方案

解決方案1
16 已采納 2013-02-24 18:56:50

變化：

介紹：

服務器端：

客戶端：

解決方案2
2 2013-02-24 20:29:40

解決方案3
0 2014-08-27 09:07:51

什么是瀏覽器/手機檢測的可用解決方案

問題描述

3 個解決方案

解決方案1 16 已采納 2013-02-24 18:56:50

變化：

介紹 ：

服務器端：

客戶端：

解決方案2 2 2013-02-24 20:29:40

解決方案3 0 2014-08-27 09:07:51

解決方案1
16 已采納 2013-02-24 18:56:50

介紹：

解決方案2
2 2013-02-24 20:29:40

解決方案3
0 2014-08-27 09:07:51