用js实现根据不同的分辨率和浏览器调用不同的css文件

最新推荐文章于 2022-10-25 16:56:55 发布
最新推荐文章于 2022-10-25 16:56:55 发布
阅读量2k 收藏 2
点赞数
分类专栏： 爬坑问题记录~分享 文章标签： 用js实现根据不同的分辨率和浏览器调用不

方法一：（根据ID设定）

<script language="Javascript">
<!-- 
if (screen.width == "800")
{
document.getElementById("MyCSS").href="800.css";
document.getElementById("xinxi").innerHTML="你的分辨率是800，系统自动为你处理为最佳显示模式。";
} 
else if (screen.width == "1024")
{
document.getElementById("MyCSS").href="1024.css";
document.getElementById("xinxi").innerHTML="你的分辨率是1024，系统自动为你处理为最佳显示模式。";
} 
else if (screen.width == "1280")
{
document.getElementById("MyCSS").href="1280.css";
document.getElementById("xinxi").innerHTML="你的分辨率是1280，系统自动为你处理为最佳显示模式。";
} 
else if (screen.width == "1366")
{
document.getElementById("MyCSS").href="1366.css";
document.getElementById("xinxi").innerHTML="你的分辨率是1366，系统自动为你处理为最佳显示模式。";
} 
else
{
document.getElementById("MyCSS").href="1024.css";
document.getElementById("xinxi").innerHTML="你的分辨率未加入到系统列表中，系统自动为你分配成1024模式，如有建议请联系我们。";
}
//--> 
</script>
方法二：(根据来访域名（或者分辨率）自动选择不同的CSS样式) 

if(window.screen.width==1280){  
    document.write("<link href='css/default1280.css' rel='stylesheet' type='text/css'>");  
}  
if(window.screen.width==800){  
    document.write("<link href='css/default800.css' rel='stylesheet' type='text/css'>");  
}

方法三：(根据来访域名（或者分辨率）自动选择不同的CSS样式)

根据来访域名来自动选择CSS样式例如一个网站有两个域名a.com和b.com用户访问a.com的时候显示a.css，访问b.com时显示b.css。
也可以根据不同的屏幕分辨率来选择CSS样式的，

在<head>和</head>中加入以下代码即可实现：

<SCRIPT language=JavaScript>
var str = window.location.hostname
if(str =="mail.hnndyy.com"){
  document.write("<link href=\"/img/hnndyy.css\" rel=\"stylesheet\" type=\"text/css\">" )
}
if(str =="mail.powerpigs.net"){
  document.write("<link href=\"/img/style.css\" rel=\"stylesheet\" type=\"text/css\">" )
} 
</script>

方法四：

用js实现根据不同的分辨率和浏览器调用不同的css文件: 

定义以下js变量,做分辨率的尺寸判断. 
var IE1024=""; 
var IE800=""; 
var IE1152=""; 
var IEother="";　 
引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。　　 
var Firefox1024=""; 
var Firefox800=""; 
var Firefox1152=""; 
var Firefoxother=""; 
引号里面分别填写，用户使用forefox的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。　　 
var Other1024=""; 
var Other800=""; 
var Other1152=""; 
var Otherother=""; 
引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 
不判断分辨率，只判断浏览器 
代码如下： 
<SCRIPT type="text/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></head>中即可。 
<SCRIPT type="text/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>
转载：http://blog.csdn.net/grief_of_the_nazgul/article/details/26689695





小猫儿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
判断用户浏览器及分辨率调用不同的CSS样式文件
09-27
判断用户分辨率调用不同的CSS样式文件，下面的代码确实有问题，不过我们提供了一个js版本的，需要的朋友可以参考下原理
JS判断浏览器分辨率自动调用不同CSS
05-30
JS判断浏览器分辨率自动调用不同CSS!
Js实现分辨率不同调用不同css如何实现？
高先生的猫
08-20 469
可以使用JavaScript的screen对象来获取当前显示屏的分辨率，然后根据不同的分辨率，使用JavaScript代码将不同css文件路径给予调用css文件的标签。 可以判断当前屏幕分辨率，然后再给予对应的css文件路径，如： html： <link rel="stylesheet" type="text/css" id="css"> js window.onload = function(){ if((screen.width == 1024) &&am.
js计算屏幕的分辨率，来完成移动端的页面自适应
.
01-26 5385
/* *代码如下 *其中的参数1080根据自己的实际情况进行修改，这里的1080代表设计页面的原始宽度，可以参考psd的标准宽度，这是后字体使用rem也有了标准，psd上的字号如：40点 对应css中的rem的换算方式为40/100=0.4rem。 */ (function (doc, win) { var docEl = doc.documentElement, resiz
js根据手机屏幕控制像素
weixin_30849591的博客
08-01 165
常见的手机屏幕的分辨率各种各样，根据手机屏幕控制像素实现屏幕自适应。 <script> (function () { var standardDpi, dpi, w, scale, text; w = window.screen.width; if (w > 0) { if (w...
js判断客户端是pc端还是移动端
热门推荐
kongjiea笔记
12-27 6万+
function IsPC(){ var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var
JavaScript/JS获取屏幕的分辨率
qq_45735918的博客
10-25 5370
获取屏幕高度。获取屏幕宽度。
JavaScript网页特效范例宝典源码
09-04
实例031 根据用户分辨率自动调整窗口 48 1.5 窗口的其他效果 49 实例032 打开窗口时显示对话框 50 实例033 使窗口背景透明 50 实例034 立体窗口 52 实例035 动态标题栏 53 实例036 固定大小的窗口 54 1.6 框架的应用...
程序天下:JavaScript实例自学手册
07-08
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 ...22.10 用JavaScript调用Google AdSense 22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...
根据屏幕分辨率调用不同页面
05-14
使用JAVASCRIPT脚本实现根据屏幕分辨率调用不同页面.
根据不同浏览器加载不同css文件
07-22
资源名称：根据不同浏览器加载不同css文件资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
html打印不同分辨率会不一样,javascript如何根据不同的屏幕分辨率为html页面设置不同的css呢?...
weixin_35645652的博客
06-07 365
摘要:下文讲述javascript中为不同分辨率引入不同的css的方法分享，如下所示；实现思路:1.编写一个获取屏幕分辨率的函数2.当遇见不同的分辨率时，修改link标签后的src属性值通过这种方式达到js修改分辨率的目的例:js根据屏幕分辨率修改css的示例分享//设置css的函数function setCss(cssPath){document.getElementsById("lnk").h...
js 不同css样式切换,JS根据不同分辨率调用不同的CSS样式文件
weixin_35569211的博客
08-03 493
本节内容：根据分辨率调用CSS样式文件这是在一个网站中看的效果，可以根据显示器不同的分辨率，调用的样式文件也不同。例子：复制代码 代码示例:根据分辨率调用不同的CSS样式文件-www.jquerycn.cnwindow.onload=function(){var sc=document.getElementById("sc");var d=document.getElementById("d");...
根据浏览器和分辨率通过JS动态调用CSS文件
weixin_30778805的博客
11-22 74
方法一 View Code <SCRIPT LANGUAGE="JavaScript"> <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWi...
node-v12.16.3-x86.msi
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
云计算基础课件—架构dr.pptx
04-25
云计算基础课件—架构dr.pptx
用js实现页面在不同分辨率下16:9的适配
06-10
以下是使用JavaScript来实现页面在不同分辨率下16:9的适配的代码： ```html <!DOCTYPE html> 页面适配 #container { width: 100%; } #video { width: 100%; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值