根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码


Posted in Javascript onFebruary 22, 2007

既判断分辨率,也判断浏览器 

重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
{ 
var IE1024=""; 
var IE800=""; 
var IE1152=""; 
var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother) 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")>=1) 
{ 
//如果浏览器为Firefox 
var Firefox1024=""; 
var Firefox800=""; 
var Firefox1152=""; 
var Firefoxother=""; 
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) 
}else{ 
//如果浏览器为其他 
var Other1024=""; 
var Other800=""; 
var Other1152=""; 
var Otherother=""; 
ScreenWidth(Other1024,Other800,Other1152,Otherother) 
} 
} 
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ 
if ((screen.width == 1024) && (screen.height == 768)){ 
setActiveStyleSheet(CSS1); 
}else{ 
if ((screen.width == 800) && (screen.height == 600)){ 
setActiveStyleSheet(CSS2); 
}else{ 
if ((screen.width == 1152) && (screen.height == 864)){ 
setActiveStyleSheet(CSS3); 
}else{ 
setActiveStyleSheet(CSS4); 
}}} 
} 
function setActiveStyleSheet(title){  
 document.getElementsByTagName("link")[0].href="style/"+title;  
} 
//--> 
</SCRIPT>

解释:

var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. 

var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

引号里面分别填写,用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";

引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

不判断分辨率,只判断浏览器 

实现根据浏览器类型自动调用不同CSS。

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
{ 
//如果浏览器为IE 
setActiveStyleSheet("default.css"); 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")>=1) 
{ 
//如果浏览器为Firefox 
setActiveStyleSheet("default2.css"); 
}else{ 
//如果浏览器为其他 
setActiveStyleSheet("newsky.css"); 
} 
} function setActiveStyleSheet(title){  
 document.getElementsByTagName("link")[0].href="style/"+title;  
} 
//--> 
</SCRIPT>

解释:
如果浏览器为IE,则调用default.css
如果浏览器为Firefox,则调用default2.css
如果浏览器为其他,则调用newsky.css

用法:
放在
[codes=xml]</head>[/codes]
前面即可。

只判断分辨率,不判断浏览器 

<script language=javascript>  
<!-- 
if (screen.width == 800) 
{ 
document.write('<link rel=stylesheet type="text/css" href="css800.css">') 
} 
else {document.write('<link rel=stylesheet type="text/css" href="css1024.css">')} 
//--> 
</script>
 
Javascript 相关文章推荐
Jquery实现简单的动画效果代码
Mar 18 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
用YUI做了个标签浏览效果
Feb 20 #Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 #Javascript
初探jquery——表单应用范例
Feb 20 #Javascript
动态调用css文件——jquery的应用
Feb 20 #Javascript
js压缩利器
Feb 20 #Javascript
通过jquery实现tab标签浏览效果
Feb 20 #Javascript
用jquery来定位
Feb 20 #Javascript
You might like
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
Yii框架函数简单用法分析
2019/09/09 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python:print格式化输出到文件的实例
2018/05/14 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python如何查看微信消息撤回
2018/11/27 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
出国留学自荐信
2013/10/25 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
上课说话检讨书500字
2014/11/01 职场文书
人工作失职检讨书
2015/05/05 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle