判断访问的是pc还是移动端展示对应的样式的方法

最新推荐文章于 2024-01-15 16:55:56 发布

Lear_博客

最新推荐文章于 2024-01-15 16:55:56 发布

阅读量2.1k

点赞数 1

分类专栏：前端开发 - 响应式开发文章标签：网页自适应媒体查询设备类型

本文链接：https://blog.csdn.net/qq_39292868/article/details/82464402

版权

前端开发 - 响应式开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

同一页面，根据访问的是pc端还是移动端来展示对应的样式。以下提供两种方法：

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

$(function(){
    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端应用的样式文件：pc.css
        //alert('当前应用样式文件是：'+link.getAttribute('href'));
        link.setAttribute('href','css/mobile.css');
        //Mobile端应用样式文件：mobile.css
        //alert('当前应用样式文件是：'+link.getAttribute('href'));
    }
})

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

<!DOCTYPE html>  
<html xmlns=" http://www.w3.org/1999/xhtml">  
<head>
<title>用媒体查询做自适应页面</title>
<!--添加视口-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 320px) and (max-width:480px)">
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 480px) and (max-width:600px)">
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (min-width: 600px) and (max-width:800px)">
<link rel="stylesheet" type="text/css" href="styleD.css" media="screen and (min-width: 800px)">
<!--
创建4个css文件，
styleA.css 中样式为// .div_1{width:320px;border:1px solid red}
styleB.css 中样式为// .div_1{width:480px;border:1px solid blue}
styleC.css 中样式为// .div_1{width:600px;border:1px solid pink}
styleD.css 中样式为// .div_1{width:800px;border:1px solid black}
-->
</head>  
<body>
 
<div class="div_1">
    我是Body下的第一个Div元素
</div>
<!--
 
当屏幕宽度介于 320px 与 480px 之间时 div元素宽度为320px,边框为红色
当屏幕宽度介于 480px 与 600px 之间时 div元素宽度为480px,边框为蓝色
当屏幕宽度介于 600px 与 800px 之间时 div元素宽度为600px,边框为粉色
当屏幕宽度大于 800px时               div元素宽度为800px,边框为黑色
 
-->
</body>  
</html>

Lear_博客

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
判断访问的是pc还是移动端展示对应的样式的方法

同一页面，根据访问的是pc端还是移动端来展示对应的样式。以下提供两种方法：1.利用js判断设备类型，应用不同样式文件$(function(){ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; ...
复制链接

扫一扫