檢查瀏覽器 HTML5 與 PHP 的兼容性

Question

我想使用 HTML5 中的輸入類型或其他功能。 但並非所有瀏覽器都支持這些 HTML5 功能。

如何檢查用戶的瀏覽器是否僅與PHP 代碼兼容 html5？

順便說一句，我不喜歡Modernizr 。 我必須弄清楚PHP。

例子：

Html5 兼容瀏覽器：

<input type="date" value="" />

Html5 不兼容的瀏覽器：

<input id="datepicker" type="text" value="" />

Answer 1

PHP確實是進行這種檢測的錯誤場所。 這是一個壞主意的原因有很多，並且它們在許多地方都有很好的記錄。

成功處理瀏覽器兼容性的關鍵是檢測對您需要的功能的支持，並使用 polyfill 或優雅地降級這些特定功能。 檢測實際的瀏覽器或瀏覽器版本是不好的做法，很可能會給您帶來誤報和漏報的問題。 由於練習的重點是避免兼容性故障，因此結果不准確會使整個事情變得有些自我挫敗。

對於特征檢測，Modernizr 是一個很棒的小工具，但如果你真的不喜歡它，就像你在問題中所說的那樣，這里有一個很小的 ​​JS 函數，專門檢測對日期輸入字段類型的支持：

/**
 * @returns boolean - True if browser suppors 'date' input type.
 */
function browserSupportsDateInput() {
    var i = document.createElement("input");
    i.setAttribute("type", "date");
    return i.type !== "text";
}

如您所見，這確實是很簡單的事情。 （順便說一下，您可以在此處找到更詳細的記錄）

使用您網站中的該功能，現在可以非常輕松地填充日期字段。

這是你的 HTML：

<input type='date' name='whatever' class='datepicker'>

現在，您可以使用一小部分 jQuery 來執行以下操作：

$(function() {
    if(!browserSupportsDateInput()) {
        $(".datepicker").datepicker();
    }
});

就那么簡單。

當然，Modernizr 會讓它變得更好。 Modernizr 本身不執行 polyfill，因此如果不支持日期輸入類型，您仍然需要類似於上述的代碼來應用 datepicker 插件，但是 Modernizr 所做的我在上面的代碼中沒有做的是允許您告訴瀏覽器僅在需要時才加載日期選擇器庫。 這將為現代瀏覽器節省大量帶寬。 Modernizr 使這種事情變得非常容易。

希望以上內容能讓您思考做這種事情的最佳方式。 這都是關於最佳實踐的。 如果你覺得你必須用 PHP 來做，那就這樣吧，但要注意你違背了幾乎所有專家的建議，從長遠來看，這會讓你更頭疼。

Answer 2

更好（且已確立）的最佳實踐是

a) 使一切也適用於非 html5 瀏覽器

或者

b.) 只需讓您的應用程序僅支持 HTML5，並且不要讓舊瀏覽器可以使用它

或者

c) 使用在舊瀏覽器中模擬（某些）HTML5 功能的 JS 工具： http : //en.wikipedia.org/wiki/HTML5_Shiv ！ 這甚至用在一些高端的主要站點中，所以它不是那么糟糕......

Answer 3

如果確實需要檢測，您應該查看http://detector.dmolsen.com 。

Answer 4

無法僅使用 PHP 進行功能檢測。

我認為你不喜歡 Modernizr，它真的很棒。

Answer 5

下面的課程可能對您有所幫助：不是 100% 的解決方案，但您可以繼續。 檢測瀏覽器的最佳方法是使用下面給出的 php 類。一旦檢測到瀏覽器，您就可以根據您的要求設置條件進行測試。

 <?php 
        class Browser { 
            public static function detect() { 
                $userAgent = strtolower($_SERVER['HTTP_USER_AGENT']); 
                if ((substr($_SERVER['HTTP_USER_AGENT'],0,6)=="Opera/") || (strpos($userAgent,'opera')) != false ){ 
                    $name = 'opera';
                } 
                elseif ((strpos($userAgent,'chrome')) != false) { 
                    $name = 'chrome'; 
                } 
                elseif ((strpos($userAgent,'safari')) != false && (strpos($userAgent,'chrome')) == false && (strpos($userAgent,'chrome')) == false){ 
                    $name = 'safari'; 
                } 
                elseif (preg_match('/msie/', $userAgent)) { 
                    $name = 'msie'; 
                } 
                elseif ((strpos($userAgent,'firefox')) != false) { 
                    $name = 'firefox'; 
                } 
                else { 
                    $name = 'unrecognized'; 
                } 
                if (preg_match('/.+(?:me|ox|it|ra|ie)[\/: ]([\d.]+)/', $userAgent, $matches) && $browser['name']=='safari' ) { 
                    $version = $matches[1]; 
                }
                if (preg_match('/.+(?:me|ox|it|on|ra|ie)[\/: ]([\d.]+)/', $userAgent, $matches) && $browser['name']!='safari' ) { 
                    $version = $matches[1]; 
                }
                else { 
                    $version = 'unknown'; 
                } 

                return array( 
                    'name'      => $name, 
                    'version'   => $version,
                ); 
            } 
        } 
        $browser = Browser::detect(); 
        echo 'You browser is '.$browser['name'].' version '.$browser['version']; 
        echo "<br />";
        ?> 

Answer 6

如果你真的想自己做，至少有兩種方法：

$browser_string = $_SERVER['HTTP_USER_AGENT'];

$browser = get_browser(null, true);

這會產生類似的東西

// contents of $browser_string
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040803 Firefox/0.9.3
//contents of $browser
Array
(
[browser_name_regex] => ^mozilla/5\.0 (windows; .; windows nt 5\.1; .*rv:.*) gecko/.* firefox/0\.9.*$
[browser_name_pattern] => Mozilla/5.0 (Windows; ?; Windows NT 5.1; *rv:*) Gecko/* Firefox/0.9*
[parent] => Firefox 0.9
[platform] => WinXP
[browser] => Firefox
[version] => 0.9
[majorver] => 0
[minorver] => 9
[cssversion] => 2
[frames] => 1
[iframes] => 1
[tables] => 1
[cookies] => 1
[backgroundsounds] =>
[vbscript] =>
[javascript] => 1
[javaapplets] => 1
[activexcontrols] =>
[cdf] =>
[aol] =>
[beta] => 1
[win16] =>
[crawler] =>
[stripper] =>
[wap] =>
[netclr] =>

)