Heim > Web-Frontend > js-Tutorial > 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码_javascript技巧

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

WBOY
Freigeben: 2016-05-16 19:18:59
Original
1138 Leute haben es durchsucht

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

重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同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>
 
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage