`

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

阅读更多
参考:
http://bbs.blueidea.com/viewthread.php?tid=2818595&extra=&page=1
http://www.520divcss.cn/Html/1434.html
http://www.wangluosky.cn/show.asp?id=184
http://www.cssk8.com/html/css_Tutorial/200908/11-1399.html
用javascript吧,在页头部用分析显示器分辨率的语句来判断,然后通过JS的输出语句输出相应的调用css代码的语句.
______________________________________________________________________________________________
答2:
网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth  +" (包括边线的宽)";
网页可见区域高: document.body.offsetHeight +" (包括边线的宽)";
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高:"+ window.screen.height;
屏幕分辨率的宽:"+ window.screen.width;
屏幕可用工作区高度:"+ window.screen.availHeight;
屏幕可用工作区宽度:"+ window.screen.availWidth;

Document. write()是文档对象的输出函数
______________________________________________________________________________________________

<script  language =javascript >
   function fen()
   {
  if (screen.width==800||screen.height==600)
   alert("800*600");
  else if (screen.width==1024||screen.height==768)
   alert("1024*768");
 
   }


css的调用随着分辨率不同而调用

dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>  <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)
{
file://如果浏览器为Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
file://如果浏览器为其他
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;
}
file://-->
</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文件名.

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

应E.Qiang提议,编如下代码。实现根据浏览器类型自动调用不同CSS。

代码:


<SCRIPT LANGUAGE="javascript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
file://如果浏览器为IE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
file://如果浏览器为Firefox
setActiveStyleSheet("default2.css");
}else{
file://如果浏览器为其他
setActiveStyleSheet("newsky.css");
}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
file://-->
</SCRIPT>

解释:

如果浏览器为IE,则调用default.css

如果浏览器为Firefox,则调用default2.css

如果浏览器为其他,则调用newsky.css

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

一、有疑问,先验证
  在调试时,先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。
  在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。
  如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常” 时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。

二、确保您期望的效果确实存在
  许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜)或滚动条指定了样式,那么您就用了私有代码,除了IE之外,在别的浏览器中毫无作用。如果验证器告诉您代码没有定义,极有可能您用了私有样式,这样在不同的浏览器中很难达到一致的效果。
  如果布局中一定要用浮动对象,别忘了适时使用清除(clear)属性。
  浮动对象似易实难,而且不总是令人如愿以偿。如果您发现浮动对象伸出了容器的边界,或者不像您所期望的那样显示,请检查您的期望是否正确。关于这个问题请看Eric Meyer的教程
  边距的合并:可用padding 或 border 来避免。
  您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins,边距的合并可能就是问题的根源。 Andy Budd 对此的解释可能为你解惑。
  避免将 padding/border 和固定宽度同时应用到同一元素。
  IE5 的区块模型是错误的,是它把事情办坏了。对此也有权宜之计,不过最好是绕过这个问题,当子元素的宽度固定时,为父元素指定padding。

三、避免IE下未指定样式内容的闪烁。
  如果您仅仅靠 @import 来输入外部样式表,早晚您会发现IE有“闪烁”的毛病。在应用CSS样式之前,未经格式化的HTML文本会短暂地出现。这是可以避免的。

四、别指望 min-width 在IE中有用。
  IE不支持它,但是它将 width 当作 min-width,所以通过一些 IE 的过滤技巧(filtering),可以实现同样的最终效果。
  把CSS过滤器(filters)当作最后的手段
  CSS 技巧和过滤器可以使您有选择地应用到(或者不应用到)某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果,而不是动不动就使用过滤器。要将它当成走投无路时的救命手段。在这里可以找到大量的CSS 过滤技巧。[译注:不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一,人们找到了许多技巧,将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。 webjx.com
  如果使用了锚点,在应用超链接样式时要特别小心。
  如果您在代码中使用了传统的锚点(),您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形,你可以使用 id,或者使用鲜为人知的语法: :link:hover, :link:active

五、记住“LoVe/HAte”(爱/恨)链接规则
  要以下面的顺序指定超链接伪类:Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了:focus,次序应为 LVHFA(“Lord Vader‘s Handle Formerly Anakin”,Matt Haughey这样建议)。
  请记住“TRouBLED”(麻烦的)边框。
  边框(border)、边距(margin)和补白(padding)的简写次序为:顺时针方向从上开始,即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零,右边距为1px,依此类推。

六、非零值要指明单位。
  在用CSS指定字体、边距或大小时,必须指明所用的单位。某些浏览器对未指明单位的处理方法不足为凭。零就是零,不管是 px还是em还是其他单位,它不需要单位。例如: padding: 0 2px 0 1em;

七、测试不同的字体大小。
  像Mozilla和Opera这样的高级浏览器允许对字体进行缩放,不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同,尽最大努力去满足他们。
  用嵌入式测试,发布时改为输入。
  将样式表嵌入在你的HTML源代码中,在测试时可以消除许多缓存引起的错误,尤其是某些Mac下的浏览器。但在发布前,一定要记住将样式表移到外部文件,用 @import 或 引入。

八、加上明显的边框有利于布局调试。
  像 div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。
  对图片路径不要用单引号。
  当设置背景图片时,要坚持用双引号。尽管看起来有些多余,但是如果不这么做,IE5/Mac会噎住。
  不要为将来的样式表(比如手持式设备或打印用样式表)留个“空位”。
  Mac IE5 对空的样式表比较感冒,会增加页面的装入时间。建议样式表中至少应该有一条规则(哪怕是注释也好),免得 MacIE噎住。
  另外值得一提的还有一些虽然不针对某些功能,但是在开发过程中应当注意的理论

九、好好组织您的CSS文件
  恰当地成块注释CSS,将相似的CSS选择符编为一组,养成一致的命名习惯和空白格式(为跨平台考虑,建议用空白字符而不是tab。)以及适当的次序。
  以功能(而不是外观)为类和ID命名
  假如您创建了一个 .smallblue 类,后来打算将文字改大,颜色变为红色,这个类名就不再有任何意义了。相反,您可以用更有描述性的名字如 .copyright 和 .pullquote。

十、组合选择符
  保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。
  使用图片替换技术时要考虑亲和力
  已经发现传统的FIR在屏幕阅读器,以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法,要根据具体情况,慎重使用。
分享到:
评论

相关推荐

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

    判断浏览器类型屏幕分辨率自动调用不同CSS的代码 打开后复制到HTML文件里运行.

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

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

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

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

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

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

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

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

    自适应网页

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

    dreamweaver的各种组件

    CSS on resolution 根据不同的分辨率调入相应的外部css文件 Css on platform 根据不同的操作系统调入相应的外部css文件 Css on Browser 根据不同的浏览器调入相应的外部css文件 FontTagKiller 将页面中所有的标记...

    JAVA上百实例源码以及开源项目源代码

     在对象创建的过程中将被容器调用,onMessage函数方法接收消息参数,将其强制转型为合适的消息类型,同时打印出消息的内容。同时一个mail note将被发送给消息发送者,发送一个e-mail通知给由recipient参数确定的e-...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...

    《程序天下:JavaScript实例自学手册》光盘源码

    20.6 检测屏幕分辨率 20.7 检测系统信息 20.8 显示本地计算机信息 20.9 检测浏览器浏览过的站点数 20.10 IE文件菜单中的打开命令 20.11 打开Internet选项对话框 20.12 打开Windows系统的画板 20.13 弹出保存对话框 ...

    程序天下:JavaScript实例自学手册

    20.6 检测屏幕分辨率 20.7 检测系统信息 20.8 显示本地计算机信息 20.9 检测浏览器浏览过的站点数 20.10 IE文件菜单中的打开命令 20.11 打开Internet选项对话框 20.12 打开Windows系统的画板 20.13 弹出保存对话框 ...

    JAVA上百实例源码以及开源项目

     在对象创建的过程中将被容器调用,onMessage函数方法接收消息参数,将其强制转型为合适的消息类型,同时打印出消息的内容。同时一个mail note将被发送给消息发送者,发送一个e-mail通知给由recipient参数确定的e-...

    IBM WebSphere Portal门户开发笔记01

    34、JS与浏览器类型以及版本 306 35、WINDOW NAVIGATOR的一些使用 310 36、进入页面自动播放音频文件 311 37、进入页面自动最大化 312 38、状态栏动态显示时间 312 39、HTML设置页面编码 312 40、JS内置对象属性及...

    EMlog博客古典式模板 v1.1.rar

    十二、在浏览器低于800分辨率下,顶部、底部横幅将不显示。在手机低分辨率下,页面的图标、按钮几乎和PC的显示有许多地方不一样。更干净、更容易操作、更方便。 一十三:视频、图片、框架都支持自适应,但必须按照...

    JavaScript网页特效范例宝典源码

    实例031 根据用户分辨率自动调整窗口 48 1.5 窗口的其他效果 49 实例032 打开窗口时显示对话框 50 实例033 使窗口背景透明 50 实例034 立体窗口 52 实例035 动态标题栏 53 实例036 固定大小的窗口 54 1.6 框架的应用...

    C#编程经验技巧宝典

    2 &lt;br&gt;0003 设置程序代码行序号 3 &lt;br&gt;0004 开发环境全屏显示 3 &lt;br&gt;0005 设置窗口的自动隐藏功能 3 &lt;br&gt;0006 根据需要创建所需解决方案 4 &lt;br&gt;0007 如何使用“验证的目标架构”功能 4 ...

Global site tag (gtag.js) - Google Analytics