我想使用HTML5 的输入类型或其他功能。但并非所有浏览器都支持这些 HTML5 功能。
如何检查用户的浏览器是否仅与 PHP 代码兼容 html5 ?
顺便说一句,我不喜欢modernizr。我必须弄清楚PHP。
例子:
兼容 HTML5 的浏览器:
<input type="date" value="" />
Html5 不兼容的浏览器:
<input id="datepicker" type="text" value="" />
我想使用HTML5 的输入类型或其他功能。但并非所有浏览器都支持这些 HTML5 功能。
如何检查用户的浏览器是否仅与 PHP 代码兼容 html5 ?
顺便说一句,我不喜欢modernizr。我必须弄清楚PHP。
例子:
兼容 HTML5 的浏览器:
<input type="date" value="" />
Html5 不兼容的浏览器:
<input id="datepicker" type="text" value="" />
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 来做,那就这样吧,但请注意,你违背了几乎所有专家的建议,从长远来看,这会让你更加头疼。
更好(且已确立)的最佳实践是
a) 让所有东西都可以在非 html5 浏览器上运行
或者
b.) 让您的应用仅支持 HTML5,不要让旧浏览器有可能使用它
或者
c) 使用在旧浏览器中模拟(某些)HTML5 功能的 JS 工具:http ://en.wikipedia.org/wiki/HTML5_Shiv !这甚至在一些高端的主要网站中使用,所以它不是那么糟糕......
如果确实需要检测,您应该查看http://detector.dmolsen.com。
下面的课程可能会对您有所帮助:不是 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 />";
?>
如果你真的想自己做,至少有两种方法:
$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] =>
)
无法仅使用 PHP 进行功能检测。
我认为你不喜欢 Modernizr,它真的很棒。