根据用户浏览器及分辨率调用不同的CSS样式文件

2016-02-19 13:39 1 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐根据用户浏览器及分辨率调用不同的CSS样式文件,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

DIV CSS教程:判断用户分辨率调用不同的CSS样式文件
  (未测试 来自网络 请自行验证)

  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文件名。

  不判断分辨率,只判断浏览器
  应E.Qiang提议,编如下代码。实现根据浏览器类型自动调用不同CSS。

  代码:

  SCRIPT LANGUAGE="javascript" 
  !-- 
  if (window.navigator.userAgent.indexOf("MSIE")=1) 
  { 
  file://如果浏览器为IE 
  setActiveStyleSheet("default.css"); 
  }else{ 
  if (window.navigator.userAgent.indexOf("Firefox")=1) 
  { 
  file://如果浏览器为Firefox 
  setActiveStyleSheet("default2.css"); 
  }else{ 
  file://如果浏览器为其他 
  setActiveStyleSheet("newsky.css"); 
  } 
  }  
  function setActiveStyleSheet(title){  
  document.getElementsByTagName("link")[0].href="style/"+title;  
  } 
  file://-- 
  /SCRIPT 
  解 释:
  如果浏览器为IE,则调用default.css
  如果浏览器为Firefox,则调用default2.css
  如果浏览器为其他,则调用newsky.css
  用法:放在head/head中即可。


  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) 
  { 
  file://如果浏览器为Firefox 
  var Firefox1024=""; 
  var Firefox800=""; 
  var Firefox1152=""; 
  var Firefoxother=""; 
  ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) 
  }else{ 
  file://如果浏览器为其他 
  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;  
  } 
  file://-- 
  /SCRIPT 

来源:https://www.tulaoshi.com/n/20160219/1604898.html

延伸阅读
标签: Web开发
在ie6里,带默认下滑条,用div布局效果。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8&q...
标签: Web开发
在ie6里,带默认下滑条,用div布局效果。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf...
标签: Web开发
不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}; 不过现在说的可不只是这些。基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小、字体选择、字符样式等。也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是没有CSS Bug的情况也会...
标签: Web开发
区别IE6与FF:        background:orange;*background:blue; 区别IE6与IE7:        background:green !important;background:blue; 区别IE7与FF:        background:orange; *background:green; 区别FF,IE7,IE6:    &n...
标签: Web开发
虽说在CSS参考手册中注明了cursor兼容性:IE4.0+ NS6.0+ 继承性:有。但还是有些属性值在FF环境中不支持. FF及IE6+支持的鼠标样式有 all-scroll  : IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 col-resize  : IE6.0 有左右两个箭头,中间由竖线分隔开的光...

经验教程

689

收藏

17
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部