根据判断浏览器类型屏幕分辨率自动调用不同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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
手写Node静态资源服务器的实现方法
Mar 20 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
Yii支持多域名cors原理的实现
2018/12/05 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python生成数字图片代码分享
2017/10/31 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python中print函数简单使用总结
2019/08/05 Python
python和php哪个容易学
2020/06/19 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
销售副总经理岗位职责
2013/12/11 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
小学数学课题方案
2014/06/15 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
大学新生入学感想
2015/08/07 职场文书
python for循环赋值问题
2021/06/03 Python