根据浏览器和分辨率调用CSS代码

2016-02-19 19:34 1 1 收藏

今天图老师小编给大家精心推荐个根据浏览器和分辨率调用CSS代码教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

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
  解释:

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  如果浏览器为其他,则调用newsky.css

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  用法:放在/head前面即可。

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

延伸阅读
作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。 理解 CSS 盒子模型 如果你想实现不需要很多奇巧淫技的跨浏...
标签: Web开发
!-- +++++++++++++++++检测屏幕分辨率++++++++++++++++++++++++++  --
标签: 电脑入门
最近市场上流行的电脑液晶显示屏一般为19寸显示器,很多朋友买完显示屏回来后,却不知道怎么正确的调整19寸显示器最佳分辨率,下面将为大家详细的讲解19寸液晶显示器最佳分辨率是多少等问题。 19寸显示器分辨率设置步骤: 鼠标右键点击桌面空白处选择属性弹出的显示属性窗口中切换到设置选项卡中在设置窗口下方找到屏幕分辨率(S),向...
标签: Web开发
1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支...
标签: Web开发
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5;  -khtml-opacity: 0.5;  opacity: 0.5; }上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera. filter:alpha(opacity=...

经验教程

347

收藏

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