根据判断浏览器类型屏幕分辨率自动调用不同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 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
js Math 对象的方法
Sep 01 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
vue中多个倒计时实现代码实例
2019/03/27 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python实例一个类背后发生了什么
2016/02/09 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
django中静态文件配置static的方法
2018/05/20 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
初学者学习Python好还是Java好
2020/05/26 Python
python程序需要编译吗
2020/06/19 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
校园十大歌手策划书
2014/02/01 职场文书
食品安全宣传标语
2014/06/07 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
党员个人承诺书
2015/04/27 职场文书