检查浏览器HTML5与PHP的兼容性

时间:2013-07-25 08:30:43

标签: php html5 cross-browser compatibility

我想使用输入类型或HTML5中的其他功能。但并非所有浏览器都支持这些HTML5功能。

如何检查用户的浏览器是否与仅限PHP代码兼容?

顺便说一句,我不喜欢 modernizr 。我必须弄清楚PHP。

示例:

兼容Html5的浏览器:

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

Html5不兼容的浏览器:

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

6 个答案:

答案 0 :(得分:9)

PHP 真的是做这种检测的错误地方。有很多理由说明这是一个坏主意,而且很多地方都有很好的记录。

成功使用浏览器兼容性的关键是检测对所需功能的支持,并填充或优雅地降低这些特定功能。检测实际的浏览器或浏览器版本是不好的做法,很可能会给你带来误报和漏报的问题。由于练习的重点是避免兼容性故障,因此结果不准确会使整个事情有点自我失败。

对于特征检测,Modernizr是一个很棒的小工具,但如果你真的不像你在问题中所说的那样相处,这里有一个小小的JS函数,它专门检测对日期输入字段类型的支持: / p>

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

正如你所看到的,这真的很简单。 (顺便说一下,你可以find it documented in more detail here

使用您网站中的该功能,现在可以非常轻松地填充日期字段。

这是你的HTML:

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

现在你可以使用一小部分jQuery执行以下操作:

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

这很简单。

当然,Modernizr会让它变得更好。 Modernizr本身不进行polyfill,所以如果不支持日期输入类型,你仍然需要类似上面的代码来应用datepicker插件,但是我在上面的代码中没有做过的Modernizr做的是允许您告诉浏览器只在需要时加载datepicker库。这将为现代浏览器节省大量带宽。 Modernizr使这种事情变得容易。

希望以上内容能为您提供一些关于做这种事情的最佳方式的思考。这都是关于最佳实践的。如果您认为必须在PHP中执行此操作,那么就这样吧,但是请注意,您违背了几乎所有专家的建议,这会让您更加头疼从长远来看。

答案 1 :(得分:5)

更好(和已建立)的最佳做法是

a)使一切都适用于非html5浏览器

OR

b。)只是让您的应用只支持HTML5,并且不要让旧浏览器使用它

OR

c)使用JS工具在旧版浏览器中模拟(某些)HTML5功能:http://en.wikipedia.org/wiki/HTML5_Shiv!这甚至用在一些高端主要网站上,所以它并没有那么糟糕......

答案 2 :(得分:2)

如果真的需要检测,你应该看看http://detector.dmolsen.com

答案 3 :(得分:0)

无法仅使用PHP进行功能检测。

我认为你对Modernizr不喜欢它真的非常棒。

答案 4 :(得分:0)

以下课程可能对您有所帮助:不是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 />";
        ?> 

答案 5 :(得分:0)

如果你真的想自己动手,至少有两种方法:

$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] =>