提问人：Steven A. Lowe 提问时间：9/18/2008 最后编辑：Steven A. Lowe 更新时间：1/29/2010 访问量：46994
如何实现在调整浏览器窗口大小时缩放的网页？
How to implement a web page that scales when the browser window is resized?
问：
如何实现在调整浏览器窗口大小时缩放的网页？
我可以使用表格或 CSS 浮动部分对页面元素进行布局，但我希望在调整浏览器窗口大小时重新调整显示比例
我有一个使用AJAX PRO和带有overflow：auto和onwindowresize钩子的DIV的工作解决方案，但它很麻烦。有没有更好的方法？
感谢大家到目前为止的答案，我打算尝试所有（或至少大部分），然后选择最佳解决方案作为此线程的答案
使用 CSS 和百分比似乎效果最好，这就是我在原始解决方案中所做的;使用设置为 100% x 100% 的 visibility：hidden div 提供了一种测量窗口工作区的方法 [否则在 IE 中很困难]，并且 onwindowresize javascript 函数允许 AJAXPRO 方法在调整窗口大小时启动，以新的分辨率重绘布局单元格内容
编辑：我很抱歉不完全清楚;我需要一个“流动布局”，其中主要元素（“窗格”）将随着浏览器窗口大小的调整而缩放。我发现我不得不使用 AJAX 调用在调整大小后重新显示“窗格”内容，并保持 overflow：auto 打开以避免滚动
答：
14赞
Fire Lancer
9/18/2008
#1
与其在 CSS 中使用“width： 200px”，不如使用“width： 50%”之类的东西
这使得它使用了 50% 的任何东西，所以在以下情况下：
<body>
<div style="width:50%">
<!--some stuff-->
</div>
</body>
div 现在将始终水平占据窗口的一半。
评论
0赞
Steven A. Lowe
1/5/2009
这基本上适用于初始布局，但您必须调整百分比以考虑不同浏览器中的边框，并且还要使用窗口大小调整触发的 AJAX 来调整 div 内容的大小
7赞
Loren Segal
9/18/2008
#2
除非你在这里有一些特定的要求，否则我不确定为什么这里需要 JS。表格布局是在 html 中制作流畅布局的简单（且过时）的方法，但带有 css 的 div 布局也允许流畅布局，参见 http://www.glish.com/css/2.asp
评论
0赞
Steven A. Lowe
10/8/2008
当浏览器窗口调整大小时，需要 JavaScript 来刷新内容
5赞
Ola Karlsson
9/18/2008
#3
是的，听起来你想看一个流畅的CSS布局。 对于这方面的资源，只需谷歌流畅的CSS布局，应该会给你很多东西来检查。 还可以看看前面的问题，以获得一些好的提示。
4赞
Zach
9/18/2008
#4
另一个需要考虑的问题是，在调整窗口大小时，JavaScript 不会持续更新，因此会出现明显的延迟/断断续续。通过流畅的 CSS 布局，屏幕元素几乎可以立即更新以实现无缝过渡。
评论
0赞
Steven A. Lowe
10/8/2008
需要 javascript 触发内容刷新，页面不全是静态的
0赞
Zach
10/27/2008
这很好，我指的是将 JavaScript 与 onresize 事件一起使用。
2赞
Peter Kelley
9/18/2008
#5
我所看到的最好的方法是使用 YUI CSS 工具，然后对所有内容使用百分比。YUI 网格允许各种固定宽度或流体布局，并将列大小指定为可用空间的一小部分。有一个 YUI Grids Builder 可以帮助布置东西。YUI Fonts 为您提供良好的字体大小控制。有一些不错的备忘单可以向您展示如何布局以及有用的东西，例如为如此多像素的字体大小指定多少百分比。
这使您可以缩放定位，但是当浏览器窗口调整大小时，整个站点的缩放（包括字体大小）有点棘手。我认为您将不得不为此编写某种浏览器插件，这意味着您的解决方案将是不可移植的。如果您在 Intranet 上，这还不错，因为您可以控制每个客户端上的浏览器，但如果您想要一个可在 Internet 上使用的站点，那么您可能需要重新考虑您的 UI。
5赞
Justin Bozonier
9/18/2008
#6
这实际上取决于您正在实现的网页。一般来说，你需要100%的CSS。在调整将包含文本的元素的大小时，请记住倾向于面向文本的大小，例如 em、ex 而不是 px。
如果你是CSS的新手，浮点数是危险的。我不是新人，他们仍然让我有些困惑。尽可能避免使用它们。通常，您只需要修改您正在处理的 div 或元素的 display 属性即可。
如果您完成所有这些操作并在遇到其他困难的网页上搜索，您不仅会有在浏览器这样做时调整大小的页面，还会有可以通过调整文本大小来放大和缩小的页面。基本上，做对了，设计是牢不可破的。我已经看到它在复杂的布局上完成，但这是大量的工作，在某些情况下与对网页进行编程一样多。
我不确定你为谁做这个网站（乐趣，利润，两者兼而有之），但我建议你仔细考虑如何平衡CSS的纯度，在这里和那里有一些技巧，以帮助提高你的效率。您的网站是否有 100% 可访问的业务需求？不？然后拧紧它。先做你需要做的事情来赚钱，然后用你的热情去疯狂，做任何你有时间做的额外事情。
评论
0赞
Steven A. Lowe
9/19/2008
该网站已经完成 - 它是为客户准备的 - 但回头看，我不喜欢我必须做些什么才能让它工作
1赞
Florian
9/18/2008
#7
在尝试了书中的解决方案后，我遇到了Firefox或IE中的不兼容问题。所以我做了一些修改，想出了这个CSS。如您所见，边距是所需大小的一半，并且是负数。
<head><title>Centered</title>
<style type="text/css">
body {
background-position: center center;
border: thin solid #000000;
height: 300px;
width: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-right: auto;
margin-bottom: auto;
margin-left: -300px;
}
</style></head>
希望能有所帮助
评论
0赞
Steven A. Lowe
9/19/2008
有趣的解决方案，但我无法将正文设置为固定大小
1赞
stalepretzel
9/23/2008
#8
使用百分比！假设您有一个“主窗格”，您的所有页面内容都位于该窗格上。您希望它始终在窗口中居中，并且占窗口宽度的 80%。
只需这样做：
#centerpane{
边距：自动;
宽度：80%;
}
多田！
评论
0赞
Steven A. Lowe
10/8/2008
我希望页面内容始终填满窗口，并在窗口调整大小时自行调整大小
1赞
Steven A. Lowe
10/8/2008
#9
感谢您的所有建议！看起来我必须做的丑陋的事情是必要的。以下内容在IE和FireFox中有效（无论如何，在我的机器上）。我可能会在以后写一篇文章 CodeProject.com;-）
这个javascript进入<head>部分：
<script type="text/javascript">
var tmout = null;
var mustReload = false;
function Resizing()
{
if (tmout != null)
{
clearTimeout(tmout);
}
tmout = setTimeout(RefreshAll,300);
}
function Reload()
{
document.location.href = document.location.href;
}
//IE fires the window's onresize event when the client area
//expands or contracts, which causes an infinite loop.
//the way around this is a hidden div set to 100% of
//height and width, with a guard around the resize event
//handler to see if the _window_ size really changed
var windowHeight;
var windowWidth;
window.onresize = null;
window.onresize = function()
{
var backdropDiv = document.getElementById("divBackdrop");
if (windowHeight != backdropDiv.offsetHeight ||
windowWidth != backdropDiv.offsetWidth)
{
//if screen is shrinking, must reload to get correct sizes
if (windowHeight != backdropDiv.offsetHeight ||
windowWidth != backdropDiv.offsetWidth)
{
mustReload = true;
}
else
{
mustReload = mustReload || false;
}
windowHeight = backdropDiv.offsetHeight;
windowWidth = backdropDiv.offsetWidth;
Resizing();
}
}
</script>
<body>是这样开始的：
<body onload="RefreshAll();">
<div id="divBackdrop"
style="width:100%; clear:both; height: 100%; margin: 0;
padding: 0; position:absolute; top:0px; left:0px;
visibility:hidden; z-index:0;">
</div>
DIV 向左浮动以进行布局。我不得不将高度和宽度设置为略低于全部的百分比（例如，99.99%、59.99%、39.99%），以防止浮动物包裹，这可能是由于 DIV 上的边框。
最后，在内容部分之后，另一个 javascript 块来管理刷新：
var isWorking = false;
var currentEntity = <%=currentEntityId %>;
//try to detect a bad back-button usage;
//if the current entity id does not match the querystring
//parameter entityid=###
if (location.search != null && location.search.indexOf("&entityid=") > 0)
{
var urlId = location.search.substring(
location.search.indexOf("&entityid=")+10);
if (urlId.indexOf("&") > 0)
{
urlId = urlId.substring(0,urlId.indexOf("&"));
}
if (currentEntity != urlId)
{
mustReload = true;
}
}
//a friendly please wait... hidden div
var pleaseWaitDiv = document.getElementById("divPleaseWait");
//an example content div being refreshed via AJAX PRO
var contentDiv = document.getElementById("contentDiv");
//synchronous refresh of content
function RefreshAll()
{
if (isWorking) { return; } //no infinite recursion please!
isWorking = true;
pleaseWaitDiv.style.visibility = "visible";
if (mustReload)
{
Reload();
}
else
{
contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
(currentEntity, contentDiv.offsetWidth,
contentDiv.offsetHeight).value;
}
pleaseWaitDiv.style.visibility = "hidden";
isWorking = false;
if (tmout != null)
{
clearTimeout(tmout);
}
}
var tmout2 = null;
var refreshInterval = 60000;
//periodic synchronous refresh of all content
function Refreshing()
{
RefreshAll();
if (tmout2 != null)
{
clearTimeout(tmout2);
tmout2 = setTimeout(Refreshing,refreshInterval);
}
}
//start periodic refresh of content
tmout2 = setTimeout(Refreshing,refreshInterval);
//clean up
window.onunload = function()
{
isWorking = true;
if (tmout != null)
{
clearTimeout(tmout);
tmout = null;
}
if (tmout2 != null)
{
clearTimeout(tmout2);
tmout2 = null;
}
丑陋，但它有效 - 我想这才是真正重要的;-）
1赞
Andy Ford
11/13/2008
#10
使用 EMS。jontangerine.com 和 simplebits.com 都是惊人的例子。延伸阅读 - The Incredible Em & Elastic Layouts with CSS，作者：Jon Tan
评论
0赞
Steven A. Lowe
11/13/2008
谢谢安迪！在之前的一个项目中以 px 为单位计算字体大小后，我最终在这个项目中将 ems 用于字体 [有效，但不是很好！
0赞
Sphvn
1/29/2010
#11
<正文 onresize=“resizeWindow（）” onload=“resizeWindow（）” > 页 < /body >
/**** Page Rescaling Function ****/
function resizeWindow()
{
var windowHeight = getWindowHeight();
var windowWidth = getWindowWidth();
document.getElementById("content").style.height = (windowHeight - 4) + "px";
}
function getWindowHeight()
{
var windowHeight=0;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body && document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
我目前正在研究的解决方案需要对宽度进行一些更改，否则到目前为止，高度工作正常^^
-尾崎
评论