判断访问的是pc还是移动端然后调用不同的css样式

Posted 2023-05-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了判断访问的是pc还是移动端然后调用不同的css样式相关的知识，希望对你有一定的参考价值。

第一种方式：利用js判断设备类型，应用不同样式文件

<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<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">
<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)">

</head>
<body>

<div class="div_1">
我是Body下的第一个Div元素
</div>

</body>
</html>

参考技术A 参考如下代码
var browser =
versions: function()
var u = navigator.userAgent, app = navigator.appVersion;
return //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
;
(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()

if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad)
window.location="https://itunes.apple.com/xxx";

else if (browser.versions.android)
window.location="http://xxx/xxx.apk";

判断访问者是pc端还是移动端

    function getBrowserType(){
        $is_mobile = false;
        $mobile_os_list=array(‘Google Wireless Transcoder‘,‘Windows CE‘,‘WindowsCE‘,‘Symbian‘,‘Android‘,‘armv6l‘,‘armv5‘,‘Mobile‘,‘CentOS‘,‘mowser‘,‘AvantGo‘,‘Opera Mobi‘,‘J2ME/MIDP‘,‘Smartphone‘,‘Go.Web‘,‘Palm‘,‘iPAQ‘); 
        $mobile_token_list=array(‘Profile/MIDP‘,‘Configuration/CLDC-‘,‘160×160‘,‘176×220‘,‘240×240‘,‘240×320‘,‘320×240‘,‘UP.Browser‘,‘UP.Link‘,‘SymbianOS‘,‘PalmOS‘,‘PocketPC‘,‘SonyEricsson‘,‘Nokia‘,‘BlackBerry‘,‘Vodafone‘,‘BenQ‘,‘Novarra-Vision‘,‘Iris‘,‘NetFront‘,‘HTC_‘,‘Xda_‘,‘SAMSUNG-SGH‘,‘Wapaka‘,‘DoCoMo‘,‘iPhone‘,‘iPod‘); 
        $is_mobile = false;
        foreach ($mobile_os_list as $key=>$value) {
            if(strpos($_SERVER[‘HTTP_USER_AGENT‘],$value)!==false){
                $is_mobile = true;
            }
        }
        foreach ($mobile_token_list as $key=>$value) {
            if(strpos($_SERVER[‘HTTP_USER_AGENT‘],$value)!==false){
                $is_mobile = true;
            }
        }
        return  $is_mobile;
    }
　　//返回值 true是移动端，false是pc端

以上是关于判断访问的是pc还是移动端然后调用不同的css样式的主要内容，如果未能解决你的问题，请参考以下文章

js判断用户的浏览器设备是移动端还是pc端

VUE 判断电脑还是手机设备 pc端自适应移动端rem布局

JS判断移动端访问设备并加载对应CSS样式

vue 判断移动端还是pc端渲染不同的页面

PHP判断访问者手机移动端还是PC端的函数，亲测好用

js判断客户端是pc端还是移动端