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

分辨率|浏览器|网页|自适应

上网这么久,曾经不止一次地看到有些网站的首页上醒目地写着"请用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-10-06 23:32:08

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

网页页面适应不同客户端浏览器和分辨率

上回 说到"大屏幕浏览页面的良好体验,本就应该用户自己调整窗口." 根据屏幕不同大小,缩小窗口出横向滚动条在所难免,但理想情况下,页面应该能适应不同客户端浏览器和分辨率.实际操作通常又有三种情况:版面自适应.视觉自适应.内容自适应. 在windows系统任务栏空白处单击右键,有如下图的菜单,分别提供有"横向平铺窗口.纵向平铺窗口"的功能,根据激活窗口个数按需切分屏幕.如果没记错的话,自win2000就已经用了,更早没试过.虽然那会我们用的显示器大些才17′,但在多窗

Android编程实现屏幕自适应方向尺寸与分辨率的方法_Android

本文实例讲述了Android编程实现屏幕自适应方向尺寸与分辨率的方法.分享给大家供大家参考,具体如下: Android 屏幕自适应方向尺寸与分辨率,包括屏幕界面布局.多分辨率支持.获取屏幕尺寸.屏幕横屏与竖屏等,android 模拟器横屏,android 虚拟机横屏,android 判断横屏,android 禁止横屏,android 强制横屏,android 横屏事件,android 自适应分辨率,android 屏幕自适应,android 图片自适应,android 横屏布局. 屏幕界面布局

html5-移动端网页检测到浏览器窗口尺寸问题

问题描述 移动端网页检测到浏览器窗口尺寸问题 我的手机屏幕分辨率是1920 * 1080,但我在网页中用window.innerHTML检测到 的手机尺寸是360 * 640. iPad mini2 检测到的尺寸是768 * 1024. 这是怎么回事? 解决方案 [JS]js代码来判断电脑或手机屏幕分辨率大小源代码 s = " 屏幕分辨率的高:"+ window.screen.height+"n"; s += " 屏幕分辨率的宽:"+ windo

手机界面-手机网页视口宽度和手机分辨率

问题描述 手机网页视口宽度和手机分辨率 我做了一个手机界面,在苹果4S上调试 如图宽度设置为100%:有两点不明白,望大神们指教: 1:苹果4S的分辨率是480*960,为什么调试窗口的大小是320*480: 2:如图的宽度我设置的是100%:为什么宽度变成了960: ps:在头部我设置了width=device-width: 解决方案 手机上网页宽度自适应问题 解决方案二: 可能是网页端有差异.建议在网页端上大概调一下,然后在真机上测试.

请教各位达人一个问题 如何使用jQuery Mobile让pc网页自适应手机屏幕

问题描述 请教各位达人一个问题 如何使用jQuery Mobile让pc网页自适应手机屏幕 请教各位达人一个问题 如何使用jQuery Mobile让pc网页自适应手机屏幕 解决方案 http://skyonsea.com/html-width%E8%87%AA%E5%8A%A8%E9%80%82%E5%BA%94%E6%89%8B%E6%9C%BA%E5%B1%8F%E5%B9%95%E5%A4%A7%E5%B0%8F/ 这个网页是关于使用jQuery Mobile让PC网页自适应手机屏幕的文

网页自适应的meta代码是怎么规定的?

问题描述 网页自适应的meta代码是怎么规定的? 我有一下几个问题想问一下: 1.移动设备浏览的网页与PC端浏览的网页,在设计上有什么不同呢? 2.网页自适应的时候,发现meta标签里有许多在html教程里看不到的东西,比如viewport,meta的name属性值里一般不是只有author.keywords.description等吗,怎么会有viewport?这个是谁制定的?它的值又是如何规定的呢? 3.meta标签里的name除了viewport值之外,还有什么值?这些到底是谁制定的呢?规

谷歌浏览器无法打开网页在其他浏览器中却可以是怎么回事?

  谷歌浏览器无法打开网页在其他浏览器中却可以是怎么回事?           一.单击"插件"会出现一个小的提示框,将前面的对号取消勾选即可. 二.右击"插件"--"选项",子选项中我们可以建立自己的规则,选择那个网站不用过滤,过滤什么样的元素等等.

电脑-网页加了一段53客服代码之后,网页在手机浏览器上显示会放的很大。

问题描述 网页加了一段53客服代码之后,网页在手机浏览器上显示会放的很大. 就是这段53客服代码 我把它加到网页的最底部,电脑上浏览网页是没有问题的,正常显示.但是在手机浏览器上看网页就被强制放大,而且不能把网页缩到最小(适合手机屏幕大小显示).请问怎么解决?跪求各位大神.

ajax-表单提交出现(若要再次显示该网页,WEB浏览器需要重新发送您以前的提交信息)

问题描述 表单提交出现(若要再次显示该网页,WEB浏览器需要重新发送您以前的提交信息) 求各位想想解决办法 解决方案 请贴出你确认按钮的代码, 解决方案二: 你点击按钮的时候 页面已经发生了一次提交吧,再次刷新的时候就是再提交,所以可以采用 javascript 来完成 确认按钮的动作.