根据判断浏览器类型屏幕分辨率自动调用不同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 相关文章推荐
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
详解react-redux插件入门
Apr 19 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
js实现时分秒倒计时
Dec 03 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
vue小白入门教程
2018/04/02 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Vue基础配置讲解
2019/11/29 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python爬虫之自制英汉字典
2019/06/24 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
WxPython实现无边框界面
2019/11/18 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
python2和python3哪个使用率高
2020/06/23 Python
办公室年终个人自我评价
2013/10/28 职场文书
经济管理专业求职信
2014/06/09 职场文书
爱护公物演讲稿
2014/09/09 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
小学语文国培研修日志
2015/11/13 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
使用Apache Camel表达REST服务的方法
2022/06/10 Servers