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

【问题标题】：Check Browser HTML5 Compatibility with PHP检查浏览器 HTML5 与 PHP 的兼容性
【发布时间】：2013-07-25 00:59:59
【问题描述】：

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

如何检查用户的浏览器是否与 仅 PHP 代码兼容 html5？。

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

示例：

HTML5兼容浏览器：

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

Html5 不兼容的浏览器：

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

【问题讨论】：

您可以查看。您可能会被浏览器欺骗（或没有提供任何信息），那么将这些信息发送到服务器有什么意义呢？另外，添加id 属性如何使其与浏览器不兼容？
@BLaZuRE 没问题，输入标签正在渲染服务器端
@BLaZuRE 这不是他担心的 id，而是使用在 html5 中呈现为日期输入字段的 type="date"：w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date
@RMK 啊，我没有看到类型的区别，所以我很困惑。

标签： php html cross-browser compatibility

【解决方案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";
}

如您所见，这确实很简单。（顺便说一句，你可以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 所做的我在上面的代码中没有做的是允许您告诉浏览器仅在需要时才加载日期选择器库。这将为现代浏览器节省大量带宽。 Modernizr 让这种事情变得非常容易。

希望以上内容能让您思考做这种事情的最佳方式。这都是关于最佳实践的。如果你觉得你必须用 PHP 来做，那就这样吧，但请注意，你违背了几乎所有专家的建议，这会让你更头疼从长远来看。

【讨论】：

非常有用！并且应该是if(!browserSupportsDateInput()) { 作为反向返回。
@Bora - 是的，哎呀。解决了这个问题。：-）谢谢。很高兴您发现它很有用。

【解决方案2】：

更好（且已确立）的最佳实践是

a) 让所有东西都可以在非 html5 浏览器上运行

或

b.) 让您的应用仅支持 HTML5，不要让旧浏览器有可能使用它

或

c) 使用 JS 工具在旧版浏览器中模拟（某些）HTML5 功能：http://en.wikipedia.org/wiki/HTML5_Shiv！甚至在一些高端的大网站上都用到了，所以还不错……

【讨论】：

我猜，标记为 A ;) 不管用户做什么他们 =D 谢谢有帮助的回答。

【解决方案3】：

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

【讨论】：

这很棒的库！但是我放弃了具有 77 个文件和 380kb 的负载检测器库。
是的，这可能是矫枉过正。正如 JohnnyFaldo 所建议的，坚持使用modernizr。它可以解决您所面临的问题而不会“超重”。

【解决方案4】：

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

我认为你不喜欢 Modernizr，它真的很棒。

【讨论】：

【解决方案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 />";
        ?>

【讨论】：

【解决方案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] =>

)

【讨论】：