根据判断浏览器类型屏幕分辨率自动调用不同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 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
vue如何进行动画的封装
Sep 26 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Python Trie树实现字典排序
2014/03/28 Python
Python多进程编程技术实例分析
2014/09/16 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
django-filter和普通查询的例子
2019/08/12 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
自我评价范文分享
2014/01/04 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
员工团队活动方案
2014/08/28 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle