因为最近京缘新的项目都要用到html5自适应移动端的技术,所以移动端的适应问题总是"老大难"问题,最近还是觉得每个移动端的浏览器都做一个兼容比较好处理,也为以后特殊bug处理更好处理,做了一个js判断处理,首先可以判断当前是否是手机访问,然后再找出当前使用的移动端用什么浏览器。
然后就是下面的方法了:
// 判断是否是手机端浏览器
function getBrowser(){
var ua = navigator.userAgent.toLowerCase();
var btypeInfo = (ua.match( /firefox|chrome|safari|opera/g ) || "other")[ 0 ];
if( (ua.match( /msie|trident/g ) || [] )[ 0 ] )
{
btypeInfo = "msie";
}
var pc = "";
var prefix = "";
var plat = "";
//如果没有触摸事件 判定为PC
var isTocuh = ("ontouchstart" in window) || (ua.indexOf( "touch" ) !== -1) || (ua.indexOf( "mobile" ) !== -1);
if( isTocuh )
{
if( ua.indexOf( "ipad" ) !== -1 )
{
pc = "pad";
} else if( ua.indexOf( "mobile" ) !== -1 )
{
pc = "mobile";
} else if( ua.indexOf( "android" ) !== -1 )
{
pc = "androidPad";
} else
{
pc = "pc";
}
} else
{
pc = "pc";
}
switch( btypeInfo )
{
case "chrome":
case "safari":
case "mobile":
prefix = "webkit";
break;
case "msie":
prefix = "ms";
break;
case "firefox":
prefix = "Moz";
break;
case "opera":
prefix = "O";
break;
default:
prefix = "webkit";
break
}
plat = (ua.indexOf( "android" ) > 0) ? "android" : navigator.platform.toLowerCase();
return {
version: (ua.match( /[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[ 1 ], //版本
plat: plat, //系统
type: btypeInfo, //浏览器
pc: pc,
prefix: prefix, //前缀
isMobile: (pc == "pc") ? false : true //是否是移动端
};
};
通过这个方法获取到的json信息,我们可以再做判断,然后根据不同的浏览器引入不同的js或者css。
大概的做法就是这样了。