网页自适应不同浏览器和分辨率[转]

上网这么久,曾经不止一次地看到有些网站的首页上醒目地写着"请用Internet Explorer 4.0版本以上浏览器在800×600分辨率下浏览本网站"等字样的文字。可是,我的17英寸的彩显你不能总让我用800×600的分辨率吧。再说了,虽然都说Netscape 6.0没有IE 5.5好,但我也要尝尝鲜呀!哦,原来你的网页在Netscape中这么丑!怪不得……。笔者经过一番研究之后,已经找到了解决此问题的方法。不相信吗?那就往下看看再说吧!
首先需要建立如下几个HTML文件:
index.html--网站主页,对浏览器进行辨别。
change-ie.html和change-nc.html--对分辨率进行辨别的网页。
index-ie.html和index-nc.html--分别代表支持两种浏览器的网页且在800×600分辨率下查看。
1024-ie.html和1024-nc.html--分别代表在1024×768分辨率下支持两种浏览器的网页。好了,废话少说,咱们就开始吧!

浏览器问题 
我们利用Dreamweaver的"Check Browser"功能。首先按下F8打开Behaviors面板,单击面板上的"+"按钮,在弹出的菜单中选择"Check Browser",弹出对话框。在Netscape Navigator后的下拉框中选择"Go to URL",在Internet Explorer后的下拉框中选择"Go to Alt URL"。然后分别单击URL和Alt URL后的Browser按钮选择change-nc.html和change-ie.html。也就是说,当网页检测到浏览器是Netscape 4.0以上版本时自动进入change-nc.html,若是Internet Explorer 4.0以上版本将自动进入change-ie.html。这样就实现了网页根据不同浏览器进入不同页面的功能。 
如果空空的一个页面在来访的朋友面前一闪而过,虽然时间很短,但似乎总觉得少了点儿什么。这正如你安装软件的时候没有进度条一样。所以还要在页面上反映出相应的信息。那就在< body>和< /body>之间加入以下代码吧!(代码中//…是对代码的注释文字,下同)
< script language=″javascript″>
var nav=navigator.appName //浏览器的名称
var ver=navigator.appVersion//浏览器的版本
document.write(″已检测到您的浏览器为:″);
document.write(″< font size=3 color=red>″); //设置浏览器的名称的字体大小及颜色
document.write(nav);
document.write(″< /font>″);
document.write(″< font size=3 color=blue>″); //设置浏览器的版本号的字体大小及颜色
document.write(ver);
document.write(″< /font>″);
document.write(″正在进入页面,请稍候…″);
< /script>

分辨率问题
解决分辨率问题在Dreamweaver中没有此项功能,我们只能手动加入一段Javascript代码。首先在change-ie.html或change-nc.html页面代码中的< head>和< /head>中加入以下代码:
< script language=JavaScript>
< !--
function redirectPage(){
var url800x600=″index-ie.html″; //定义两个页面,此处假设index-ex.html和1024-ie.html同change-ie.html在同一个目录下
var url1024x768=″1024-ie.html″;
if ((screen.width==800) && (screen.height==600)) //在此处添加screen.width、screen.height的值可以检测更多的分辨率
window.location.href= url800x600;
else if ((screen.width==1024) && (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
// -->
< /script>
然后再在< body…>内加入onLoad=″redirectPage()″
< script language=JavaScript>
< !-- 
var w=screen.width
var h=screen.height
document.write(″系统已检测到您的分辨率为:″);
document.write(″< font size=3 color=red>″);
document.write(w+″×″+h);
document.write(″< /font>″);
document.write(″正在进入页面转换,请稍候…″);
// -->
< /script>
最后,同样地,在< body>和< /body>之间加入以下代码来显示网页的工作信息:
好了,一切工作完成,试一试效果,感觉不错吧?

时间: 2024-11-03 22:02:24

网页自适应不同浏览器和分辨率[转]的相关文章

关于设置网页自适应不同浏览器的问题解决

在制作一个登录界面时遇到了这样一个问题,背景图片是一张大的图片,登录内容设计师设计的比较大,当我把图切出来之后,发现由于我的浏览器屏幕比较小,背景图片出现了滚动条,登录内容在小的屏幕下显得异常的大,这样我们就需要解决两个问题:1如何让背景图片完整的铺满整个屏幕,并且随着浏览器屏幕的不同自适应   2如何让登录内容始终居中,这样就是登录内容到屏幕顶端的距离的自适应. 解决方法:问题1 将背景图片单独切出来,但用作前景图片,并设置 .beijing { position:fixed; width:1

如何使网页自适应电脑屏幕分辨率

在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小. 第一种方法:做一个网页解决问题(长了点) 如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助. 一.消除任意缩放浏览器窗口对网页的影响 一番辛苦做出来的网页,在全屏状态下浏览一切正常.但

网页自适应不同浏览设备的方法

网页自适应可使网站从桌面电脑显示器到智能手机或其他移动产品设备上具有更好的阅读体验,具体方法如下: 1.在HTML头部增加viewport标签. 在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放.代码如下: <meta name="viewport" content="width=device-width, initial-scale=1" /> 这段代码支持Chrome.Firefox.I

70.JS---利用原生js做手机端网页自适应解决方案rem布局

利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s

网页兼容各种浏览器

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.一.CSS HACK 以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; width: 80px; } </sty

非微信图文网页,微信浏览器点击图片弹出自带图片浏览 (原创请勿转载)

微信图文网页点击插入的图片,会在微信的图片浏览器上浏览图片可以放大缩小,但是自己做的网页没有这个功能,下面我就来介绍一下这个功能,做出一个完美一点的demo.如果不想看过程直接到最后看demo... 教程需要:脚本编辑器(记事本或者是notepad++.DW都可以).jquery.js.微信浏览器作为测试 如下图效果 我们用到的是微信内置JsAPI的一个,这个函数在微信的开发者平台文档里我没有找到,是在网上搜到的. WeixinJSBridge.invoke('imagePreview',{  

黄聪:如何用代码设置控制自己网站的网页在360浏览器打开时强制优先使用极速模式,而非兼容模式

最近用360浏览器访问自己的网站,发现都是被优先选用兼容模式打开,这使得网站很难看.为了让360浏览器打开网站的时候优先试用极速模式,找了一下官方论坛,发现了解决方案. 在head标签中添加一行代码: <html> <head> <meta name="renderer" content="webkit|ie-comp|ie-stand"> </head> <body> </body> <

网页图片的尺寸、分辨率、物理尺寸的理解。

1.我们通常所说的网页图片大小500*270,是指500px*270px(即图片长和宽上的像素数): 2.分辨率,指的是单位长度(物理长度)上的像素数.(网页图片最常用的分辨率是72 像素/英寸) 3.物理尺寸指的是图片实际外显时的物理尺寸(常用单位厘米或英寸) 三者关系:图片(像素)尺寸=分辨率*物理尺寸: 图片大小:200kb,即图像所占内存大小. (备注:像素不是长度单位,它是虚单位,需要分辨率这个桥梁,才能和实际物理尺寸对应)

如何设置自适应当前浏览器高度的div块

嗯 就是下面这样 <!DOCTYPE html> <head> <title>adaptive this page size</title> <script type="text/javascript"> function adpaHeight() { var bodyHeight = document.documentElement.clientHeight; //获取当前浏览器宽高 document.getElementB