曾发过一篇博文“根据客户端分辨率改变图像大小的JS脚本”,介绍一个简单的图像大小自适应的例子。事实上,如何兼顾不同分辨率下用户的浏览效果,一直是web程序员头痛的问题之一。
目前,大部分用户的浏览器分辨率为800px*600px和1024px*768px,极少数为 640px*480px,当然,1280px*1024px(偶目前的
)及更高的分辨率,将逐步成为主流。就用户的使用习惯而言,纵向滚动是很自然的,但横向滚动,就让人恼火了。所以,当前的大部分web页面设计,均采用800px宽度居中的形式来设计。这样的好处无疑是很明显的,较好的兼容性,无横向滚动,并且由于固定大小,界面可以设计得很美观。
但是,固定宽度大小(800px)的设计,是不得已而为止的办法。在1280px*1024分辨率下,800px宽度的页面就像一根小棍子立在屏幕中间,内容全部挤在一起,看起来很痛苦,而且,浪费了极大的屏幕空间。那么,设计可根据用户分辨率自动调整宽度的网页,应该是个更好的选择。
在最近的网站升级中,这方面的工作纳入日程,以下是一个简单但完备的页面例子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta name="Security" content="public" />
<meta name="DC.Rights" content="Copyright (c) 2007 by Johnson Zhong" />
<meta name="KEYWords" contect="xhtml sample" />
<meta name="DEscription" contect="xhtml sample" />
<meta name="Author" contect="Johnson Zhong" />
<meta name="Robots" contect="all" />
<style type="text/css">
BODY{
MARGIN: 0px;
}
#wrap {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #ffffff; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: expression(this.offsetParent.clientWidth<800?"770px":"99%"); PADDING-TOP: 2px; min-width: 770px
}
#main {
CLEAR: both; BACKGROUND: #fff; MARGIN-TOP: 6px;
}
#leftbar {
BORDER-RIGHT: #dddddd 1px solid; BORDER-LEFT: #dddddd 1px solid; BORDER-TOP: #dddddd 1px solid; BORDER-BOTTOM: #dddddd 1px solid; BACKGROUND: #F2F9DC; FLOAT: left; PADDING-BOTTOM: 5px; WIDTH: 188px; height:100%
}
#cenbar {
FLOAT: left; PADDING-BOTTOM: 10px; WIDTH: 100%;
}
#sublogopanel {
CLEAR: both; width:100%; height:80px; position:relative; BACKGROUND: url(/_img/ad-bg.jpg) repeat-y left;
}
#rightbar {
FLOAT: left; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: 180px; margin-left:0px; margin-top:0px; background:#cccccc
}
</style>
<title>xhtml sample!</title>
</head>
<body>
<!--body层开始-->
<div id="wrap">
<div id="main">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="188" height="100%" valign="top">
<!--左边-->
<div id="leftbar">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="72" valign="top"> </td>
</tr>
</table>
</div>
<!--左边结束-->
</td>
<td width="100%" valign="top">
<!--中间内容-->
<div id="cenbar">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<div id="sublogopanel">
<img height="80" width="388" src="/_img/sublogo_esource.jpg">
</div>
</td>
</tr>
</table>
</div>
<!--中间内容结束-->
</td>
<td width="180" valign="top">
<!--右边-->
<div id="rightbar">
<table width="100%" height="72">
<tr>
<td width="180" height="1">
</td>
</tr>
</table>
</div>
<!--右边结束-->
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
以上代码中,将页面树向分为三栏,其中左右栏宽度固定,中间栏宽度自动调整。
加红的两处地方比较关键,第一处:
WIDTH: expression(this.offsetParent.clientWidth<800?"770px":"99%");
通过在CSS样式表中应用javascript判断:如果当前窗口宽度小于800,则页面宽度为770px,否则为当前窗口宽度*99%;
<img height="80" width="388" src="/_img/sublogo_esource.jpg">
在中间层插入一张图片,确保当用户窗口宽度小于800时候,页面宽度不在缩小。
分享到:
相关推荐
JS判断浏览器分辨率自动调用不同CSS!
用javascript自动判断不同浏览器不同分辨率的代码
根据浏览器宽度调整布局
根据浏览器大小使网页内容自动放大缩小,小巧的js 节省代码量
判断浏览器类型屏幕分辨率自动调用不同CSS的代码 打开后复制到HTML文件里运行.
浏览器分辨率测试插件Window_Resizer_1_9_0_1.crx
HTML5网页背景自适应缩放代码,背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片,兼容主流浏览器(不兼容IE678)
2、安装完成后,打开网页即可通过点击右上角的插件图标来打开插件窗口,在该窗口内你可以任意点击一个分辨率来为浏览器调整大小,同时你也可以通过选取多个分辨率来打开多个新窗口用以测试网页。
让flash自适应浏览器分辨率(网页flash全屏代码)[借鉴].pdf
测试了系统自带ie、易浏览框、cef、360系列浏览器(外部进程的浏览器需自行写到dll里并注入到浏览器进程里)、精易模块的“系统_取屏幕分辨率”。支持ie内核、webkit内核或其他。资源作者:。@a3780586510。资源下载:...
JS判断浏览器分辨率调用不同css样式,网上搜集的,难免有误,呵呵,敬请谅解。
针对不同的网页元素控件,详细讲述使用不同的方法自动填写。在浏览器里就可以实现,不需要另外安装软件。自动填表方案放在软件收藏栏,使用时就像打开一个网址一样简单。
解决网页适应不同的浏览器和分辨率的问题,做两个适合不同分辨率的页面,一个是800×600,一个是1024×768,在800×600的页面中加入一下代码就可以实现
图片怎么全屏,找了好长时间都没有找到,今天偶遇,在此与大家分享下背景图片自适应分辨率浏览器大小自动拉伸全屏代码,希望对大家有所帮助
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
木头多功能浏览器(专业版)可以生成自动刷新网页监控网页局部内容变化、网页自动点击、自动批量填写表单等功能。 木头多功能浏览器(专业版)完美支持HTML5,多用户多选项卡的调整网页浏览器。在一台电脑上实现登录同...
网页里边的Js代码是可以读取到屏幕分辨率和浏览器...通过对分辨率的检测,可以做为是否同一用户同一个浏览器在访问的依据。 浏览器自动更改屏幕分辨率和浏览器窗口大小,这样网页中的代码就检测到我们设置的分辨率了。
在QT5 写的一个小实例, 打开一个浏览器和对应的网页
主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下