首页 >web前端 >js教程 >根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码_javascript技巧

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

WBOY
WBOY原创
2016-05-16 19:18:591146浏览

既判断分辨率,也判断浏览器 

重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。

复制代码 代码如下:
<script> <BR><!-- <BR>if (window.navigator.userAgent.indexOf("MSIE")>=1) <BR>{ <BR>var IE1024=""; <BR>var IE800=""; <BR>var IE1152=""; <BR>var IEother=""; <br><br>ScreenWidth(IE1024,IE800,IE1152,IEother) <BR>}else{ <BR>if (window.navigator.userAgent.indexOf("Firefox")>=1) <BR>{ <BR>//如果浏览器为Firefox <BR>var Firefox1024=""; <BR>var Firefox800=""; <BR>var Firefox1152=""; <BR>var Firefoxother=""; <br><br>ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) <BR>}else{ <BR>//如果浏览器为其他 <BR>var Other1024=""; <BR>var Other800=""; <BR>var Other1152=""; <BR>var Otherother=""; <BR>ScreenWidth(Other1024,Other800,Other1152,Otherother) <BR>} <BR>} <br><br>function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ <BR>if ((screen.width == 1024) && (screen.height == 768)){ <BR>setActiveStyleSheet(CSS1); <BR>}else{ <BR>if ((screen.width == 800) && (screen.height == 600)){ <BR>setActiveStyleSheet(CSS2); <BR>}else{ <BR>if ((screen.width == 1152) && (screen.height == 864)){ <BR>setActiveStyleSheet(CSS3); <BR>}else{ <BR>setActiveStyleSheet(CSS4); <BR>}}} <BR>} <br><br>function setActiveStyleSheet(title){ <BR> document.getElementsByTagName("link")[0].href="style/"+title; <BR>} <BR>//--> <BR></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> <BR><!-- <BR>if (window.navigator.userAgent.indexOf("MSIE")>=1) <BR>{ <BR>//如果浏览器为IE <BR>setActiveStyleSheet("default.css"); <BR>}else{ <BR>if (window.navigator.userAgent.indexOf("Firefox")>=1) <BR>{ <BR>//如果浏览器为Firefox <BR>setActiveStyleSheet("default2.css"); <BR>}else{ <BR>//如果浏览器为其他 <BR>setActiveStyleSheet("newsky.css"); <BR>} <BR>} <br><br>function setActiveStyleSheet(title){ <BR> document.getElementsByTagName("link")[0].href="style/"+title; <BR>} <BR>//--> <BR></script>


解释:
如果浏览器为IE,则调用default.css
如果浏览器为Firefox,则调用default2.css
如果浏览器为其他,则调用newsky.css

用法:
放在
[codes=xml][/codes]
前面即可。

只判断分辨率,不判断浏览器 

复制代码 代码如下:
<script> <BR><!-- <BR>if (screen.width == 800) <BR>{ <BR>document.write('<link rel=stylesheet type="text/css" href="css800.css">') <BR>} <BR>else {document.write('<link rel=stylesheet type="text/css" href="css1024.css">')} <BR>//--> <BR></script>
 
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn