全百科精品资源分享
免费优质资源下载平台

js判断访问的是pc还是移动端分别调用不同的css样式

播放按钮
文章目录

今天全百科网分享的是利用JS判断不同的访问环境然后分别调用不同的CSS样式,这个主要针对移动设备访问时,给移动端用户更好的浏览体验。
js判断访问的是pc还是移动端分别调用不同的css样式

第一种方式

利用js判断设备类型,应用不同样式文件

<!DOCTYPE html> 
<html xmlns=" http://www.w3.org/1999/xhtml">
 <!--
* 作者:全百科网
* 网站:http://www.quanbaike.com/
   -->
<head>
<title>JS判断设备类型,应用不同css文件</title>
<link rel="stylesheet" type="text/css" href="style_A.css" />
</head>  
<body>
 <div>
 </div>
 <script type="text/javascript">
 var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        //移动设备浏览器版本信息
        return {
            //IE内核
            trident: u.indexOf('Trident') > -1,
            //opera内核      
            presto: u.indexOf('Presto') > -1,
            //苹果、谷歌内核          
            webKit: u.indexOf('AppleWebKit') > -1,
            //火狐内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
            //是否为移动终端
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), 
            //ios终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            //android终端或者uc浏览器
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, 
            //是否为iPhone或者QQHD浏览器
            iPhone: u.indexOf('iPhone') > -1 , 
            //是否iPad           
            iPad: u.indexOf('iPad') > -1,
            //是否web应该程序,没有头部与底部
            webApp: u.indexOf('Safari') == -1
        };
    }(), 
    language:(navigator.browserLanguage || navigator.language).toLowerCase()  
}   
   
if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){    cssChange();     
}  
 
function cssChange(){
    var link = document.getElementsByTagName('link')[0];
    //PC端应用的样式文件:style_A.css
    alert('当前应用样式文件是:'+link.getAttribute('href'));
    link.setAttribute('href','style_B.css');
    //Mobile端应用样式文件:style_B.css
    alert('当前应用样式文件是:'+link.getAttribute('href'));
}
 </script>
</body>  
</html>

第二种方式

利用css3的媒体查询,在不同的分辨率下,调用不同的css文件

<!DOCTYPE html>  
<html xmlns=" http://www.w3.org/1999/xhtml">  
 <!--
* 作者:全百科网
* 网站:http://www.quanbaike.com/
-->
<head>
<title>JS判断设备类型,应用不同css文件</title>
<link rel="stylesheet" type="text/css" href="style_A.css" />
</head>  
<body>
 
<div>
 
</div>
 
<script type="text/javascript">
 
var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        //移动设备浏览器版本信息
        return {
            //IE内核
            trident: u.indexOf('Trident') > -1,
            //opera内核      
            presto: u.indexOf('Presto') > -1,
            //苹果、谷歌内核          
            webKit: u.indexOf('AppleWebKit') > -1,
            //火狐内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
            //是否为移动终端
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), 
            //ios终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            //android终端或者uc浏览器
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, 
            //是否为iPhone或者QQHD浏览器
            iPhone: u.indexOf('iPhone') > -1 , 
            //是否iPad           
            iPad: u.indexOf('iPad') > -1,
            //是否web应该程序,没有头部与底部
            webApp: u.indexOf('Safari') == -1
        };
    }(), 
    language:(navigator.browserLanguage || navigator.language).toLowerCase()  
}   
   
if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){    cssChange();     
}  
 
function cssChange(){
    var link = document.getElementsByTagName('link')[0];
    //PC端应用的样式文件:style_A.css
    alert('当前应用样式文件是:'+link.getAttribute('href'));
    link.setAttribute('href','style_B.css');
    //Mobile端应用样式文件:style_B.css
    alert('当前应用样式文件是:'+link.getAttribute('href'));
}
 
</script>
</body>  
</html>

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0) 打赏
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » js判断访问的是pc还是移动端分别调用不同的css样式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏