JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式
代码如下:
<!--
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;
}
//-->
解释:
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.
varFirefox1024="";
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。
代码如下:<SCRIPTLANGUAGE="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]
前面即可。
只判断分辨率,不判断浏览器
代码如下:
<scriptlanguage=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>
JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式的更多相关文章
- js判断浏览器类型 js判断ie6不执行
js判断浏览器类型 $.browser 对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...
- Js 判断浏览器类型整理
判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...
- JS判断浏览器类型,JS判断客户端操作系统
JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...
- JS判断浏览器类型和详细区分IE各版本浏览器
今天用到JS判断浏览器类型,于是就系统整理了一下,便于后期使用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- JS判断浏览器类型的方法总结(IE firefox chrome opera safari)
JS判断浏览器类型的方法总结,可判别当前客户端所使用的浏览器是ie,firefox,safari,chrome或者是opera,另外js可以精确判断到ie浏览器的版本,依然直接上代码,需要的朋友可按照 ...
- js判断浏览器类型以及浏览器版本
判断浏览器类型: if navigator.userAgent.indexOf(”MSIE”)>0) {} //判断是否IE浏览器 if(isFirefox=navigator.userAg ...
- JS判断浏览器类型及版本
浏览器 ie firefox opera safari chrome 分类: 一路辛酸---JavaScript 你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, S ...
- js判断浏览器类型以及版本
你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器. 几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的 ...
- 【javascript】—— JS判断浏览器类型、操作系统
navigator.userAgent : userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. navigator.platform : platform ...
随机推荐
- PL/SQL编程基础
1. PL/SQL块的基础结构 DECLARE /* * 定义部分——定义常量.变量.复杂数据类型.游标.用户自定义异常 */ BEGIN /* * 执行部分——PL/SQL语句和SQL语句 */ E ...
- STM32:TIMER输出比较模式-PWM
在自己小板子上移植PWM时候又重新学习了一下,加入两点:1,对各种输出比较模式的学习:2,输出模式时加入中断 先写出函数: //TIM4 PWM部分初始化 //PWM输出初始化 //period:输出 ...
- Java中static方法
今天学习到了并且应用到了java中的静态方法,并且了解到它的好处与缺点. ● 生命周期(Lifecycle): 静态方法(Static Method)与静态成员变量一样,属于类本身,在类装载的时候被装 ...
- HDU 5279 分治NTT 图的计数
思路: 显然每个子图内都是森林 去掉所有子图1和n都连通且每条大边都存在的情况 直接DP上 NTT优化一波 注意前两项的值.. //By SiriusRen #include <bits/std ...
- [转]linux之awk命令
转自:http://blog.chinaunix.net/uid-23302288-id-3785105.html awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓 ...
- Log4J2的 PatternLayout
Log4J2 PatternLayout 参考 日志样例 : 2018-10-21 07:30:05,184 INFO - DeviceChannelServiceImpl.java:434[defa ...
- React Native真机调试安卓版
React Native真机调试安卓版 一.准备工作 1.1 环境搭建 React Native中文网的文档已经非常清晰地描述了,按照步骤即可.http://reactnative.cn/docs/0 ...
- Java类加载机制总结
关于Java类加载机制的几个基本概念: JDK提供的基本类加载器:引导类加载器(Bootstrap Class Loader)-用于加载JDK中的核心类.扩展类加载器(Ext Class Loader ...
- html5——文本阴影
基本结构 text-shadow: 30px 23px 31px #;/* 文字阴影: 水平位移 垂直位移 模糊程度 阴影颜色*/ 凹凸文字 <!DOCTYPE html> <htm ...
- html5——DOM扩展
元素获取 1.document.getElementsByClassName ('class') 通过类名获取元素,以类数组形式存在. 2.document.querySelector(‘div’) ...