`
wjlgryx
  • 浏览: 308437 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

根据判断浏览器类型屏幕分辨率自动调用不同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文件名.



不判断分辨率,只判断浏览器
程序代码

<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

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

本文收藏于;

分享到:
评论
1 楼 疾风鹰狼 2013-03-16  

相关推荐

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

    该脚本主要实现了根据用户所使用的浏览器类型以及屏幕分辨率来动态加载不同的CSS样式表。这种技术在早期网页开发中较为常见,用于实现针对不同设备或浏览器的适配方案。 #### 二、解析脚本逻辑 1. **检测浏览器...

    JS判断浏览器分辨率自动调用不同CSS

    "JS判断浏览器分辨率自动调用不同CSS"是一个实现响应式布局的技术手段,通过JavaScript检测浏览器窗口的分辨率,并据此加载相应的CSS样式表。这种技术尤其适用于多设备兼容性需求高的项目。 首先,我们需要了解...

    JS判断浏览器分辨率调用不同css样式

    ### JS判断浏览器分辨率调用不同CSS样式的实现方法 在Web开发中,为了提供更好的用户体验,根据不同的设备分辨率(屏幕尺寸)应用相应的CSS样式是非常重要的。这种方法有助于优化页面布局、提高加载速度,并确保...

    ASP.NET根据屏幕分辨率调用不同css文件

    在本场景中,我们探讨的是如何根据用户的屏幕分辨率来调用不同的CSS(Cascading Style Sheets)文件,以实现响应式网页设计。响应式设计能够使网站在不同设备上,如桌面电脑、平板电脑和手机上,呈现出最佳的视觉...

    根据屏幕分辨率调用css_asp.net_

    标题“根据屏幕分辨率调用css_asp.net_”指的是利用编程逻辑来动态地根据用户的屏幕分辨率加载相应的CSS(层叠样式表)文件,以实现网页布局的自适应。这通常涉及到JavaScript或服务器端的C#代码来检测浏览器窗口的...

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

    这段代码的主要目的是检测用户所使用的浏览器类型(如IE、Firefox或其他)以及其屏幕分辨率,然后根据这些信息动态地更改页面的样式表。这个过程涉及到几个关键部分: 1. **浏览器类型检测**:通过检查`navigator....

    js判断页面的不同分辨率调用不同的css

    总的来说,通过 JavaScript 判断页面分辨率并调用不同的 CSS 文件,我们可以有效地实现响应式设计,确保网站在各种设备上都有良好的视觉效果和交互体验。这种技术在现代网页开发中是不可或缺的一部分,尤其是在移动...

    php通过javascript判断不同设备分辨率来调用不同的css实现

    在本文中,我们将深入探讨如何使用PHP和JavaScript结合来判断不同设备的分辨率,并根据设备的特性调用相应的CSS样式表,以实现响应式设计。这是一个非常实用的技术,它能够确保网站在不同尺寸的屏幕和设备上都能有...

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

    一般我们可以通过下面的代码判断分辨率 复制代码代码如下: [removed] &lt;!– Begin function redirect...DIV CSS教程:判断用户分辨率调用不同的CSS样式文件 (未测试 来自网络 请自行验证) 复制代码代码如下: var

    css判断不同分辨率显示不同宽度布局实现自适应宽度

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局

    JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码

    本篇将探讨如何使用JavaScript来判断不同的分辨率,并根据判断结果加载相应的CSS样式文件。这种方法可以确保在各种屏幕尺寸下,网页都能呈现出良好的视觉效果。 首先,我们来看一下提供的示例代码。在这个例子中,...

    自适应网页

    如何使网页自适应电脑屏幕分辨率?判断读者浏览器类型和屏幕分辨率,自动调用不同CSS。

    jQuery css3猎豹浏览器宽屏banner焦点图切换代码

    【jQuery css3猎豹浏览器宽屏banner焦点图切换代码】是一种常见的网页设计技术,用于创建动态、吸引人的全屏横幅广告或展示区域。在网页设计中,这种焦点图切换效果能够有效地展示多个图片或内容,提升用户体验,...

    经典JS调用图片代码大全

    JS能根据设备的分辨率和浏览器窗口大小动态调整图片尺寸,确保图片在任何设备上都能完美呈现。HTML5的`&lt;picture&gt;`标签结合JS可实现更高级的响应式图片管理。 3. **图片预加载**:为了消除用户等待图片加载的空白期...

    UCWEB调用实现和代码

    此外,由于PPC设备的屏幕尺寸和分辨率各异,UCWEB还需要有良好的适应性,能够自适应不同设备的显示效果。 4. 网页兼容性:UCWEB作为浏览器,其核心任务是正确地解析和展示各种网页。这需要对HTML、CSS、JavaScript...

    jQuery+CSS3右下角图标菜单代码

    5. **响应式设计**:考虑到不同设备的屏幕尺寸,可能需要对CSS进行调整,确保菜单在手机和平板上也能正常工作。可以使用媒体查询(`@media`)来定义不同屏幕尺寸下的样式规则。 6. **浏览器兼容性**:虽然大部分现代...

Global site tag (gtag.js) - Google Analytics