根据判断浏览器类型屏幕分辨率自动调用不同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仿flash上传头像效果实现代码
Jul 18 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
vue中activated的用法
Jan 03 Vue.js
用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
JAVA/JSP学习系列之七
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
PHP之header函数详解
2021/03/02 PHP
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JS功能代码集锦
2016/05/04 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python函数中的可变长参数详解
2019/09/12 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
社区禁毒工作方案
2014/06/02 职场文书
绘画专业自荐信
2014/07/04 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
培训通知书模板
2015/04/17 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
电影开国大典观后感
2015/06/04 职场文书
事业单位岗位说明书
2015/10/08 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
MySQL系列之六 用户与授权
2021/07/02 MySQL
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
Redis主从复制操作和配置详情
2022/09/23 Redis