Products
GG网络技术分享 2025-03-18 16:13 3
同一页面，根据访问的是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>
JavaScript判断打开项目的浏览器类别方法有哪些？wpmee小编为大家分享一下。
通过以下方法判断浏览器：
代码如下：
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.\\*/), //是否为移动终端
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, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf(\'iPad\') > -1, //是否iPad webApp:
u.indexOf(\'Safari\') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}以下为在各个浏览器中要执行的操作
代码如下：
if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面 var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == \"micromessenger\") {
//在微信中打开
}
if (ua.match(/WeiBo/i) == \"weibo\") {
//在新浪微博客户端打开
}
if (ua.match(/QQ/i) == \"qq\") {
//在QQ空间打开
}
if (browser.versions.ios) {
//是否在IOS浏览器打开
}
if(browser.versions.android){
//是否在安卓浏览器打开
}
} else {
//否则就是PC浏览器打开
}以上就是JavaScript判断打开项目的浏览器类别方法的详细内容，更多请关注wpmee。
Demand feedback