网页端适配手机端的js识别代码
通过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>