网页端适配手机端的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> 

 

 

 
 
 
posted @ 2019-12-02 13:47  李明0517  阅读(474)  评论(0)    收藏  举报