根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码

幸运的光哥哥

幸运的光哥哥

2016-02-19 10:42

下面图老师小编要跟大家分享根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!
既判断分辨率,也判断浏览器 

重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同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 
展开更多 50%)
分享

猜你喜欢

根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码

Web开发
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码

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

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

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

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

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

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

Web开发
判断用户浏览器及分辨率调用不同的CSS样式文件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

根据分辨率不同调用不同的css文件

Web开发
根据分辨率不同调用不同的css文件

用js自动判断浏览器分辨率的代码

Web开发
用js自动判断浏览器分辨率的代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

iOS开发中Quartz2D的基本使用方式举例

iOS开发中Quartz2D的基本使用方式举例

Ajax的内部实现机制、原理与实践小结

Ajax的内部实现机制、原理与实践小结
下拉加载更多内容 ↓