自动调整分辨率

最新推荐文章于 2024-04-30 22:06:17 发布
最新推荐文章于 2024-04-30 22:06:17 发布
阅读量304 收藏
点赞数 1
文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/master3003/article/details/84005847
版权
曾发过一篇博文“根据客户端分辨率改变图像大小的JS脚本”，介绍一个简单的图像大小自适应的例子。事实上，如何兼顾不同分辨率下用户的浏览效果，一直是web程序员头痛的问题之一。


　　目前，大部分用户的浏览器分辨率为800px*600px和1024px*768px，极少数为　640px*480px，当然，1280px*1024px（偶目前的）及更高的分辨率，将逐步成为主流。就用户的使用习惯而言，纵向滚动是很自然的，但横向滚动，就让人恼火了。所以，当前的大部分web页面设计，均采用800px宽度居中的形式来设计。这样的好处无疑是很明显的，较好的兼容性，无横向滚动，并且由于固定大小，界面可以设计得很美观。

　　但是，固定宽度大小（800px）的设计，是不得已而为止的办法。在1280px*1024分辨率下，800px宽度的页面就像一根小棍子立在屏幕中间，内容全部挤在一起，看起来很痛苦，而且，浪费了极大的屏幕空间。那么，设计可根据用户分辨率自动调整宽度的网页，应该是个更好的选择。

　　在最近的网站升级中，这方面的工作纳入日程，以下是一个简单但完备的页面例子。
Html代码
<!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>

<!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时候，页面宽度不在缩小
master3003
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自动设置分辨率
07-18
自动设置分辨率
Windows分辨率自动调整
05-26 215
使用XPE Windows 10 DPI Fix 转载于:https://www.cnblogs.com/kuangke/p/5529872.html
自动适应分辨率
浪缘的专栏
11-27 1282
两种方法：一种是调整系统分比率适应程序，一种是程序适应分辨率，个人倾向于第一种 方法1：   const //记录设计时的分辨率。 PelsWidth = 1024; PelsHeight = 768; var OldPelsWidth: Integer; OldPelsHeight: Integer; function Resolution(AWidth, AHeig
根据显示器分辨率进行的调整的Javascript脚本
greenerycn的专栏
04-20 1347
 根据显示器分辨率进行的调整的Javascript脚本                                                                          By greenerycn#163.com 2007年4月20日主要代码:1.根据分辨率,使用不同的代码.script type="text/javascript">     /
设置Vmware虚拟机自动调整窗口大小、自动调整分辨率/界面大小
萧海的博客
07-04 4809
vmware安装完虚拟机后，经常发现虚拟机窗口太小，就算不用图形界面，直接使用终端也是非常别扭，而且每次重启后窗口都会变得那么小，很麻烦。如果是windows虚拟机图形界面那么小的窗口真是没法用了，那么如何设置自动调整窗口大小呢？  首先必须要正确安装vmware tools工具，一般情况下vmware tools是会自动安装的，如果没有正确安装请看这篇文章《Vmware linux虚拟机和主机之间复制、粘贴内容、拖拽文件》里的手工安装vmware tools。  vmware tools工具成功安装之
VMware Fusion自动调整分辨率的问题
OrangQceee的博客
01-07 2153
在mac里面用VMware Fusion安装了win7的虚拟机，一开始win7的分辨率很高，图标小到看不清，然后调整了分辨率。但是每次一切换到mac，win7的分辨率就会被调整到默认值。 如何禁用VMware Fusion的自动调整分辨率功能？ 在设置->显示器中把虚拟机分辨率选项调整为拉伸显示。 我看网上有说取消使用Retina全分辨率显示的，但是我发现并没有什么软用，只是降低了虚拟机的分辨率，并不会阻止VMware Fusion自动调整分辨率。 ...
html自动适应分辨率,自适应分辨率html
weixin_33108105的博客
05-31 728
/*去掉全局边框，页面就正常了(就没有滚动条了)*/div{border: 1px solid red;}img{border: 1px solid red;}font{border: 1px solid red;}ul{border: 1px solid red;}body{background-color:yellow;}123456window.onresize=function(){ini...
VirtualBox调整分分辨率
lxyoucan的博客
05-29 5847
以前在windows或者macOS基本都是使用vmware来玩虚拟机的。到linux环境，想体验一下VirtualBox。结果用的时间发现分辨率都是调不出来。记录一下我的操作方法。 环境 宿主机：archlinux + i3wm 虚拟机：windows7 安装增强功能 首先你需要安装增强功能 方法： 设备=》安装增强功能… 这里电脑中会出现一个虚拟光驱，把虚拟光驱里的安装包安装一下就行了。 安装完成重新启动电脑。 调整分辨率 虽然我安装了增强功能发现还是无法把分辨率调整成显示器的分辨率1920*1080只能
JS限定手机版中图片大小随分辨率自动调整的方法
10-20
下面小编就为大家带来一篇JS限定手机版中图片大小随分辨率自动调整的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
电脑批量自动修改分辨率
02-18
适合网吧批量开机修改分辨率，个人收藏使用。
windows分辨率自动设置工具
04-14
windows分辨率自动设置工具,根据显示器的型号和大小自动设置相应的分辨率
android根据分辨率自动调整字体大小的实例代码
01-20
手机设备太多，分辨率也不一样，看到网上大部分的适应字体的方法是定义values320×480或value-hdpi方式去处理。采用第一种的就惨了，很多设备的分辨率是不一样的，难道要每种都定义吗？采用第二种的在平板电脑里没有...
pb在不同分辨率下自动调整程序界面
04-02
pb在不同分辨率下自动调整程序界面，很好使用
显示器分辨率自动调整工具V1.3绿色版.rar
09-04
本程序可以自动调整显示器分辨率，当然你也可以手工调整。启动后将检测你的显示设备显卡名称，当前设置的分辨率及推荐设置。提示若黑屏或出错，15秒内Ctrl R恢复，Ctrl A安全设置。自动设置推荐分辨率的倒计时已停止...
Webrtc 动态分辨率
ab7936573的专栏
06-08 4534
Webrtc更改分辨率改动点: 1.  激活内容分析模块开启分辨率调整功能 bool ViEEncoder::Init() 函数中119行 改动vp_->EnableContentAnalysis(false); 为 vp_->EnableContentAnalysis(true); 用以激活内容分析模块分辨率调整模块(VCMQmResolution)需要内容分析模块分析的数据用以调整分
电脑分辨率不能调_自动设置分辨率(电脑自动调分辨率)V1.3.2015 单文件绿色版
weixin_39876856的博客
11-14 332
自动设置分辨率(电脑自动调分辨率)是一款自动设置显示器分辨率的小工具，原理是从注册表读取显示器的EDID或枚举显示器支持的属性(需显卡驱动支持)，然后设置。准确率还算很高！ 分32位和64位两个版本，并且每个版本都含CRT版和LCD版两个应用程序，很实用的小 自动设置分辨率(电脑自动调分辨率)是一款自动设置显示器分辨率的小工具，原理是从注册表读取显示器的EDID或枚举显示器支持的属性(需显卡驱动...
让窗体自适应屏幕分辨率的变化——已经比较准确的源代码
weixin_30781107的博客
07-04 194
我的上个帖子中的源代码有点问题，把窗体的尺寸调整放在了后面，应该放在前面，才能满足等比例放大的要求，现在改了过来，基本上应该比较正确了。以下源码可以直接引用，在你的窗体的FormCreate方法中调用 FitDeviceResolution(Self); 即可实现。 //实现屏幕分辨率的自动调整 procedureFitDeviceResolution(Sen...
常见的 HTML 标准
最新发布
csdn_ad986ad的博客
04-30 791
HTML（Hypertext Markup Language）有多个版本和标准。
webrtc自动调整分辨率
07-10
WebRTC在实时通信中具有自适应分辨率的功能，可以根据网络和设备性能自动调整视频的辨率。这种自适应分辨率的调整可以确保在低带宽或稳定网络环境下，仍能够提流畅的视频通信。 WebRTC通过使用CP（实时传输控制协议...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值