下面分享一段网站适配手机基于ua判断的js代码，这个js代码使用场合一般在pc和手机版都独立制作的情况下，做识别手机跳转的用途。
通过navigator的userAgent和appVersion做判断，然后可以添加不同css来实现网页端和手机端的样式
//不同设备显示不同页面
browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1,
iPhone: u.indexOf("iPhone") > -1,
iPad: u.indexOf('iPad') > -1, //是否iPad
};
} (),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
//手机
if(browser.versions.mobile){
commom_phone();//移动端
$('#phone').attr('href','css/index_phone.css');
}else{
commom();//pc初始样式
if(pm_url==268){
newslist(pm_url);//新闻列表页面
}
}另外，可以通过js来调用不同的css文件：
首先，给你的link定一个ID，比如： <link href="style01.css" rel="stylesheet" type="text/css" id="link1" />
然后，通过link1.href属性改变样式文件名：
document.getElementById("link1").href = "style02.css";为适应不同浏览器对ID的调用方法，可以写一个GetObj()为：
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else{
return eval('document.all.' + objName);
}
}
GetObj("link1").href = 'style02.css';//在这里改变文件名
//--><!]]>
</script>虽然现在已经不主张pc和手机独立做了，这一点观点可以参考跨屏网之前的文章《网站正在从多屏到跨屏的过渡》，其中做了大量的案例引证，比如说苹果、微软、adobe等知名互联网大企业均采用pc适配多终端的方式。
未经允许不得转载：跨屏互联 » 网站适配手机基于ua判断的js代码
