JavaScript检测浏览器类型

在开发Web应用时，我们常常需要检测用户所使用的浏览器类型，以便确定如何为其提供最佳的体验。下面介绍一些JavaScript代码片段，可用于检测不同浏览器及其版本。

检测浏览器类型

使用下面的代码可以检测当前浏览器的类型：

var ua = navigator.userAgent.toLowerCase();
var browserType = '';
if(/chrome/.test(ua)){ //判断是否为谷歌浏览器
    browserType = 'Chrome';
}else if(/firefox/.test(ua)){ //判断是否为火狐浏览器
    browserType = 'Firefox';
}else if(/safari/.test(ua)){ //判断是否为Safari浏览器
    browserType = 'Safari';
}else if(/opera/.test(ua)){ //判断是否为Opera浏览器
    browserType = 'Opera';
}else if(/msie/.test(ua)){ //判断是否为IE浏览器
    browserType = 'IE';
}
alert('当前浏览器类型为：' + browserType);

该代码会弹出一个消息框，显示当前浏览器的类型。

检测浏览器版本

如果需要检测浏览器的版本号，可以在上面代码的基础上加上一些判断条件：

var ua = navigator.userAgent.toLowerCase();
var version = '';
if(/chrome\/([\d.]+)/.test(ua)){ //判断是否为谷歌浏览器
    version = ua.match(/chrome\/([\d.]+)/)[1];
}else if(/firefox\/([\d.]+)/.test(ua)){ //判断是否为火狐浏览器
    version = ua.match(/firefox\/([\d.]+)/)[1];
}else if(/safari\/([\d.]+)/.test(ua)){ //判断是否为Safari浏览器
    version = ua.match(/safari\/([\d.]+)/)[1];
}else if(/opr\/([\d.]+)/.test(ua)){ //判断是否为Opera浏览器
    version = ua.match(/opr\/([\d.]+)/)[1];
}else if(/msie ([\d.]+)/.test(ua)){ //判断是否为IE浏览器
    version = ua.match(/msie ([\d.]+)/)[1];
}
alert('当前浏览器版本为：' + version);

该代码也会弹出一个消息框，显示当前浏览器的版本。

检测浏览器是否支持HTML5

在开发HTML5应用时，我们需要检测当前浏览器是否支持HTML5。可以使用下面的代码：

function isHtml5Supported(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}
if(isHtml5Supported()){
    alert('当前浏览器支持HTML5');
}else{
    alert('当前浏览器不支持HTML5');
}

该代码检测当前浏览器是否支持canvas元素，如果支持则说明浏览器支持HTML5。

以上是一些常用的JavaScript代码片段，可用于检测不同浏览器及其版本，以及检测浏览器是否支持HTML5。