判断访问的是pc还是移动端然后调用不同的css样式
2个回答
展开全部
第一种方式：利用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)">
<!--
创建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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2017-01-13 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
参考如下代码
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";
}
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";
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
