当前位置: 首页 > news >正文

JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式


代码如下:

<!-- 
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;
} 
//--> 



解释: 
var IE1024=""; 
var IE800=""; 
var IE1152=""; 
var IEother=""; 
引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

varFirefox1024=""; 
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。 
代码如下:

<!-- 
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;
} 
//--> 


解释:
如果浏览器为IE,则调用default.css 
如果浏览器为Firefox,则调用default2.css
如果浏览器为其他,则调用newsky.css 
用法:
放在 
[codes=xml]</head>[/codes] 
前面即可。 
只判断分辨率,不判断浏览器 
代码如下:

<!-- 
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">')} 
//--> 


 

转载于:https://www.cnblogs.com/fyq891014/archive/2012/06/02/4188865.html

相关文章:

  • CentOS 6.7 如何启用中文输入法
  • Citrix XenDesktop 引发的学案(四)-与“您的虚拟桌面”之间的连接失败,状态(1030)...
  • 云计算成朝阳产业,未来发展已成趋势
  • js去掉html标签和去掉字符串文本的所有的空格
  • 关于Flurry的数据统计
  • 使用wix制作安装包
  • 使用Windows8开发Metro风格应用七
  • 黑马程序猿——15,String,StringBuffer,基本数据类型包装对象
  • linux libpcap的性能问题,请大家注意绕行。
  • LVS与KEEPALIVED实现高性能高可用负载均衡服务器
  • Vue(二)header组件开发
  • Yii性能调整
  • predict_proba 的使用
  • shell环境变量以及set,env,export的区别
  • 【PHP】富文本HTML过滤器:HTMLPurifier使用教程(防止XSS)
  • 【刷算法】求1+2+3+...+n
  • Angular 响应式表单之下拉框
  • Docker下部署自己的LNMP工作环境
  • idea + plantuml 画流程图
  • JavaScript类型识别
  • nginx 配置多 域名 + 多 https
  • Otto开发初探——微服务依赖管理新利器
  • PHP 小技巧
  • React+TypeScript入门
  • Sass 快速入门教程
  • SpringBoot几种定时任务的实现方式
  • SpriteKit 技巧之添加背景图片
  • Vue--数据传输
  • Webpack 4x 之路 ( 四 )
  • 官方解决所有 npm 全局安装权限问题
  • 技术:超级实用的电脑小技巧
  • 区块链分支循环
  • 我建了一个叫Hello World的项目
  • 详解移动APP与web APP的区别
  • 原生 js 实现移动端 Touch 滑动反弹
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • 正则表达式-基础知识Review
  • ​iOS实时查看App运行日志
  • $GOPATH/go.mod exists but should not goland
  • (2.2w字)前端单元测试之Jest详解篇
  • (C++)八皇后问题
  • (cljs/run-at (JSVM. :browser) 搭建刚好可用的开发环境!)
  • (NSDate) 时间 (time )比较
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (十五)使用Nexus创建Maven私服
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)创业的注意事项
  • (转)我也是一只IT小小鸟
  • .aanva
  • .net redis定时_一场由fork引发的超时,让我们重新探讨了Redis的抖动问题
  • .net反混淆脱壳工具de4dot的使用
  • .NET开发不可不知、不可不用的辅助类(一)
  • /var/lib/dpkg/lock 锁定问题
  • @hook扩展分析